阅读 672

复习webpack4之提升Webpack打包速度的方法

之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

1.跟上技术的迭代(Node,Npm,Yarn)

如果Node进行了版本更新,性能方面有所提升,webpack运行在node的基础上,性能也会跟着有所提升。

如果更新Npm和Yarn,模块之间遇到相互引用的情况下,新版本的包管理工具可能会更快的帮我们分析包依赖,做一些包的引用。

2.在尽可能少的模块上应用Loader

比如我们使用babel-loader的时候,不需要对node_modules也进行编译。

exclude: /node_modules/

因为通常来说,node_modules里面的js通常都被编译过了,我们再去重新编译一次就会造成浪费。

3.尽可能少的使用plugin,并且要保证plugin的可靠性

比如,我们在打包线上代码时,会压缩css,就会使用optimize-css-assets-webpack-plugin这个插件,但是在开发环境中,我们不需要压缩css,所以在两个配置文件中,做出不同的配置。

打包线上代码的配置:

在本地开发配置文件中就可以不加这个plugin。

另外我们在使用插件时,最好使用社区中验证过,性能比较好的插件。因为有一些个人开发的插件,性能得不到保证,会对打包速度有影响。

4.resolve参数合理配置

4.1 extensions

有时候我们引入一个文件,想配置成不写文件后缀的引入方式,就需要用到这个配置项。

这样webpack在引入文件时,就会去找后缀名为js和jsx的文件。

但是如果我们配置了很多类型的文件后缀,那么webpack打包时每次都要重复找这个文件,对性能就会有损耗,所以我们只把逻辑文件配置在extensions里面。

4.2 mainFiles

现在我们想引用一个文件夹下的index.js文件,有什么方法让webpack默认引入index.js文件呢

就可以写成

也可以多加配置

就可以写成

但是如果配置特别多,也是会影响到weback打包速度的。

4.3 alias

我们在写react和vue的时候,常常会配置alias,通过给目录设置别名,webpack打包的时候就能找到目录。

相当于

5.使用DllPlugin提升webpack打包速度

我们在开发过程中,难免引入第三方模块(比如lodash),而每次在打包的时候,都会重新去分析每个引入的包,分析完之后把他们打包到我们的代码中。其实第三方模块引入后,通常是不会改变的,我们可以把他们单独打包生成一个文件,只在第一次打包的时候分析他们,以后再打包时直接用分析的结果(实际是把第三方模块打包成文件,通过全局变量输出)。

我们先在webpack.config.js目录中(如果分环境打包,就在配置文件的目录中),新建一个webapck.dll.js。

假设我们这次引入了lodash这个第三方模块,那么要在webpack.dll.js中增加配置

然后需要在package.json中增加一个命令。

然后我们继续完善代码,先安装一个插件

cnpm install add-asset-html-webpack-plugin --save

复制代码

然后在webpack.common.js中引入插件

然后增加使用一个插件,意思是,向html中增加一个资源,这个资源的目录是dll下的vendor.dll.js。

然后我们启动npm run dev,发现这控制台中输入vendor,会出现一个函数,我们第一步就达成了,现在需要让我们的代码使用这个全局变量。

打开webpack.dll.js,增加如下配置。

意思是,要用DLLPlugin分析这个库,这个库就是我们输出的全局变量。

分析后会生成一个映射关系文件,我们可以配置文件生成的路径

这样打包出来就会多出一个文件。

然后在webpack.common.js中增加一个插件,帮我们处理映射关系,并且目录指向我们生成的json文件,这样他底层就会自动去全局变量中拿vendor。如果映射关系不存在,才会去node_modules中分析代码。

然后进行打包就能看到效果了

使用前

使用后

如果有多个映射关系文件,就要配置多份,也可以写成下面这种形式。

这样node会自动分析dll目录下有几个文件,帮我们自动去添加两个插件。

6.控制包文件大小

通过Tree Shaking对冗余代码的删除。配置SplitChunksPlugin对大文件进行拆分,拆分成一些小文件。

7.thread-loader,parallel-webpack,happypack 多进程打包

7.1 ParallelUglifyPlugin

ParallelUglifyPlugin可以把对JS文件的串行压缩变为开启多个子进程并行执行

首先安装webpack-parallel-uglify-plugin

cnpm i -D webpack-parallel-uglify-plugin
复制代码

在plugins中配置

new ParallelUglifyPlugin({
    workerCount: 3, //开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1
    uglifyJS: {
        output: {
            beautify: false, //不需要格式化
            comments: false, //不保留注释
        },
        compress: {
            warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
            drop_console: true, // 删除所有的 `console` 语句,可以兼容ie浏览器
            collapse_vars: true, // 内嵌定义了但是只用到一次的变量
            reduce_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值
        }
    }
})
复制代码

7.2 HappyPack

HappyPack就能让Webpack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

首先安装happypack

cnpm i happypack@next -D
复制代码

在module中配置:

module: {
    rules: [{
        test: /\.js$/,
        //把对.js文件的处理转交给id为babel的HappyPack实例
        use: 'happypack/loader?id=babel',
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
    }, {
        //把对.css文件的处理转交给id为css的HappyPack实例
        test: /\.css$/,
        use: 'happypack/loader?id=css',
        include: path.resolve(__dirname, 'src')
    }]
}
复制代码

在plugins中配置

plugins: [
    //用唯一的标识符id来代表当前的HappyPack是用来处理一类特定文件
    new HappyPack({
        id: 'babel',
        //如何处理.js文件,和rules里的配置相同
        loaders: [{
            loader: 'babel-loader',
            query: {
                presets: [
                    "env", "react"
                ]
            }
        }]
    }),
    new HappyPack({
        id: 'css',
        loaders: ['style-loader', 'css-loader'],
        threads: 4, //代表开启几个子进程去处理这一类型的文件
        verbose: true //是否允许输出日子
    })
]
复制代码

8.sourceMap

结合之前的sourceMap文章,在不同环境用不同的sourceMap打包。

在平常开发中,推荐使用cheap-module-eval-source-map,这样报错提示比较完全,打包速度也比较快。

而线上代码如果也需要map映射的话,推荐使用cheap-module-source-map,这样报错提示会更好一些。

结语

除了这些方法,其实还有很多提升打包速度的方法,这需要我们在平常不断的积累,所以我们在日常开发中,要善于总结,把使用到的好的方法都记录下来,为以后的工作打下坚实的基础。

关注下面的标签,发现更多相似文章
评论