webpack优化项目构建速度

1分包缓存splitChunks

2DllReferencePlugin-提前构建大型lib库

3开启多进程打包

const HappyPack = require('happypack')

plugins-中使用
new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
         }),
         
    module: {
      rules: [
          // js
          {
              test: /\.js$/,
              // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
              use: ['happypack/loader?id=babel'],
              include: '/src',
              // exclude: /node_modules/
          }
      ]

4noParse和IngorePlugin

• noParse 精准过滤不需要编译的依赖项
• IngorePlugin 忽略无用文件-例如moment-自己手动引入对应语言-降低包体积

5 Scope Hosting 合并ES6作用域多个函数 HotModuleReplacementPlugin

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin')
 plugins: [
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('development')
        }),
        new HotModuleReplacementPlugin()
    ],

6 懒加载-import引入-vue-路由组件-内部页面组件

7 webpakc-merge-smart抽离配置文件

可以进行-各种环境-开发-生成环境不同的配置策略

8分析那些可以被优化

npm install speed-measure-webpack-plugin --save-dev

// 分析打包时间
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
module.exports = {
  configureWebpack: smp.wrap({
    plugins: [new BundleAnalyzerPlugin()]
  })
}