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