webpack优化总结

1. 分包

将不需要变动的第三方包分离出去, 主要方法有：

(1). externals
(2). DllPlugin
(3). expose-loader
(4). ProviderPlugin

2. 拆包

将大包拆成小包，将公共模块抽离，将公共组件与业务代码分离，主要方法有：

1. CommonChunkPlugin
2. SplitChunksPlugin (webpack4)

3. 分离包(Code Spliting)

将无需首屏加载的模块分离出去，采用按需加载的方式，当点击按钮的时候才去加载指定模块，有助于提升性能

使用 require.ensure 或 dynamic import

4. 减小文件搜索范围

(1). 各种loader一定要配置include和exclude，减少查找范围

例如：babel-loader，可以配置include目录为src，exclude目录为node_modules

下面是一个配置示例：

module: {
  preLoaders: [
    {
      test: /\.js$/,
      loader: 'eslint',
      include: [resolve('src')],
      exclude: /node_modules/
    },
    {
      test: /\.svg$/,
      loader: 'svgo?' + JSON.stringify(svgoConfig)，
      include: [resolve('src/assets/icons')],
      exclude: /node_modules/
    }
  ],
  loaders: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      include: [resolve('src')],
      exclude: /node_modules\/(?!(autotrack|dom-utils))|vendor\.dll\.js/
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url',
      exclude: /assets\/icons/,
      query: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}

(2). 使用noParse跳过文件解析

//不解析jquery.js，不解析element-ui.js
module: {
    noParse: /node_modules\/(jquey.js)/
    //noParse: /node_modules\/(element-ui\.js)/
}

(3). 使用resolve缩短搜索目录和路径

resolve modules配置搜索目录，resolve alias配置路径别名

示例如下：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      // ...
      'store': resolve('src/store')
    }
  },
  ...
}

5. 开启并行加速

1. 使用HappyPack对多种loader进行并行加速
2. 使用并行的uglify插件对uglify进行并行加速，常用插件有 webpack-parallel-uglify-plugin(首选) 或 webpack-uglify-parallel 或官方的 uglifyjs-webpack-plugin

6. 开启缓存

webpack的loader和plugin都有自己的缓存，开启缓存将有助于提高速度

(1). 开启babel-laoder的cacheDirectory，使用transform-runtime等

// webpack.config.js
use: [{
        loader: 'babel-loader',
        options: {
            cacheDirectory: true
        }
}]
// .bablerc
{
    "presets": [
        "env",
        "react"
    ],
    "plugins": ["transform-runtime"]
}

(2). 开启happyPack的cacheDirectory

7. 减少模块引入

(1). 使用模块化引入，而不是使用解构方式引入模块

import {debounce} from 'lodash'; //解构会引入模块整体
import debounce from 'lodash/debounce'; //模块化只引入部分模块

(2). 解构可以配合babel-plugin-import来部分引入模块

(3). Tree Shaking可以减少模块的引入(webpack2以上支持)

8. Scope Hoisting

Webpack新支持的Scope Hoisting 可以将多个闭包合并为一个闭包，有助于提升性能

9. 部分loader的替换优化

例如： fast-sass-loader代替sass-loader

10. 导出json文件，导入分析工具进行分析

webpack编译时加上参数 --json > stat.json 后，可以上传到 webpack-analyse 、webpack-visualizer 等分析站点上，看看打包的模块信息

参考：https://juejin.im/post/5b8ac03ff265da431c627f8e
　　 https://m.imooc.com/article/21213
　　 https://www.jianshu.com/p/3b9a19e5cead

猜你喜欢