webpack是一个非常出色的、流行的前端模块打包工具,但由于webpack底层的文件模块依赖分析机制,当用于开发大项目时,打包速度会不是很理想,这时候就需要进行优化。
可以通过下面的这些方法来优化webpack。
1.在项目允许的情况下,更新webpack版本、node版本
通常来说,新版本的webpack、node一般会有性能上的提升,但也有可能存在与现有项目不兼容的情况,所以要根据实际情况来决定是否升级。
2.尽量缩小loader的应用范围,指定include、exclude
const path = require('path'); module.exports = { //... module: { rules: [ { test: /.js$/, include: path.resolve(__dirname, 'src'), exclude: /node_modules/, loader: 'babel-loader', }, ], }, };
3.去除非必要的loader、plugin
启动 loader/plugin 需要耗费一定时间,不必要的可以删除,已经弃用的要及时清除。
4.配置或减少resolve,减少文件查找
module.exports = { //... resolve: { extensions: ['.js', '.json'], }, };
5.配置babel-loader缓存目录
module.exports = { //... rules: [ { test: /.js$/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } } ] };
6.配置DllPlugin
配置DllPlugin将第三方库或一些很少修改的文件进行独立打包,然后直接引用,可以提高项目的编译速度。
// webpack.dll.js const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { vendor: ['vue', 'element-ui'] }, output: { path: path.join(__dirname,'dist'), filename: '[name].dll.js', library: '[name]-[hash]' }, plugins: [ new webpack.DllPlugin({ // name 与 output.library 一致 name: '[name]-[hash]', // context 与 DllReferencePlugin 中一致 context: __dirname, path: path.join(__dirname, 'dist', '[name]-manifest.json') }); ] };
// webpack.config.js module.exports = { // ... plugins: [ new webpack.DllReferencePlugin({ context: __dirname, // manifest 就是之前打包出来的 json 文件 manifest: require('./dist/vendor-manifest.json'), }) ] };
7.合理使用多进程
开启多进程打包不是必然能加快打包速度,因为创建进程(600ms左右)、进程通信需要一定的时间开销,开启进程的个数需要合理设置,一般在原先的打包时间较长时配置使用。
module.exports = { { test: /.js$/, use: [ { loader: 'thread-loader', options: { wordkers: 2 } }, // ... ] } };