个人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这个版本再也不须要额外引入，默认使用。 具体配置参见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()
  ]
}

复制代码

最后

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