webpack優化總結

看風景就發表於2018-09-28
Web優化

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

相關文章