webpack優化總結

1. 分包

將不需要變動的第三方包分離出去, 主要方法有：

(1). externals
(2). DllPlugin (autodll-webpack-plugin可簡化配置)
(3). expose-loader
(4). ProviderPlugin
(4). IgnorePlugin   忽略不必要的內容，例如moment的locale 

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/thread-loader 對多種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 等分析站點上，看看打包的模塊信息