我的webpack优化总结-白红宇

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这个版本不再需要额外引入，默认使用。具体配置参见.

为动态生成的chunk赋予名称

import(/* webpackChunkName:"detail" */'./detail').then(({
     default}) => {})复制代码

同时支持上述语法需要配置babel插件。

npm install babel-plugin-syntax-dynamic-import -D复制代码

然后加入到.bablerc中的plugins中。

{  "plugins": ["syntax-dynamic-import"]}复制代码

同时如果使用React的话，可以直接使用组件进行懒加载。

可视化分析工具

webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = {  plugins: [    new BundleAnalyzerPlugin()  ]}复制代码

最后

这些只是在项目中已经采用的优化方法，会不断寻找其他方案同时试用，继续更新这篇文章。