exclude
loader指定排除node_modules下文件,减少文件范围,同时减少各种loader处理文件所需时间。
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
}
复制代码
Dllplugin
dllplugin 用来将网页依赖的基础模块先编译出来,打包到一个个单独的动态链接库中去。这样包含大量复用模块的动态链接库只需要编译一次,在之后的构建过程中被动态链接库包含的模块将不会在重新编译,而是直接使用动态链接库中的代码。
首先接入Dllplugin将常用的模块构建一次,同时生成manifest.json文件,文件清楚地描述了与其对应的 dll.js 文件中包含了哪些模块,以及每个模块的路径和 ID。
const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
module.exports = {
entry: {
vendor: ['react', 'react-dom'],
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, 'build'),
library: '_dll_[name]',
},
plugins: [
new DllPlugin({
name: '_dll_[name]',
path: path.join(__dirname, 'build', '[name].manifest.json'),
}),
],
};
复制代码
然后在正常配置中引入DllReferencePlugin
plugins:[
new DllReferencePlugin({
manifest: require('./build/mainfest.json')
})
]
复制代码
执行过程: 开发过程中先是webpack --config webpack.dll.js 编译一次动态链接库,然后正常 webpack --config webpack.config.js 即可。
HappyPack
webpack本身构建是单线程进行的,happypack就是用来让webpack做到将任务分解成多个进程并发执行。
{ test: /(\.jsx|\.js)$/,
use: 'happypack/loader?id=js', //告诉happypack 去选择哪个happypack实例去处理
exclude: /node_modules/
}, {
test: /\.css$/,
use: 'happypack/loader?id=css'
},
复制代码
new HappyPack({
id:'js', //需要和上面的问号传参相对应
loaders:['babel-loader']
}),
new HappyPack({
id:'css',
threads:1, // 开启几个线程进行处理这些文件
loaders:['style-loader','css-loader']
}),
复制代码
按需加载
webpack 4之前需要使用commonChunksPlugin,在4这个版本不再需要额外引入,默认使用。 具体配置参见segmentfault.com/a/119000001….
为动态生成的chunk赋予名称
import(/* webpackChunkName:"detail" */'./detail').then(({default}) => {})
复制代码
同时支持上述语法需要配置babel插件。
npm install babel-plugin-syntax-dynamic-import -D
复制代码
然后加入到.bablerc中的plugins中。
{
"plugins": ["syntax-dynamic-import"]
}
复制代码
同时如果使用React的话,可以直接使用 Suspense 组件进行懒加载。
可视化分析工具
- webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
复制代码
最后
这些只是在项目中已经采用的优化方法,会不断寻找其他方案同时试用,继续更新这篇文章。