webpack配置優化

看風景就發表於2018-01-29
Web優化

1.使用alias簡化路徑

alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src')
}

2.overlay介面彈出編譯錯誤

devServer: {
    overlay: {
        errors: true,
        warnings: true
    }
}

3.import語句指定chunkName

webpack2用import來代替require.ensure，其無法直接指定chunkName，可以使用註釋的方式指定

import(/* webpackChunkName: "my-chunk-name" */ 'module');

4.Tree-shaking

只打包引用的方法，模組的為引用方法不被打包

什麼是 tree shaking，即 webpack 在打包的過程中會將沒用的程式碼進行清除(dead code)。一般 dead code 具有一下的特徵：

1. 程式碼不會被執行，不可到達
2. 程式碼執行的結果不會被用到
3. 程式碼只會影響死變數（只寫不讀）

Tree shaking 生效必要條件

1. 模組引入要基於 ES6 模組機制，不能使用 commonjs 規範，因為 es6 模組的依賴關係是確定的，和執行時的狀態無關，可以進行可靠的靜態分析，然後清除沒用的程式碼。而 commonjs 的依賴關係是要到執行時候才能確定下來的。

2. 開啟 UglifyJsPlugin 這個外掛對程式碼進行壓縮

5.Scope Hoisting

webpack以前使用獨立的函式包裝一個個模組檔案，webpack3可以將所有模組連線到一個閉包裡面，放入一個函式，執行速度更快，體積也會更小

scope hoisting，顧名思義就是將模組的作用域提升，在 webpack 中不能將所有所有的模組直接放在同一個作用域下，有以下幾個原因：

1. 按需載入的模組
2. 使用 commonjs 規範的模組
3. 被多 entry 共享的模組

想要webpack3開啟Scope Hoisting，必須在 plugins 中新增 ModuleConcatenationPlugin

6.不用使用DllPlugin外掛

7.內聯少量的css，減少請求

plugins: [
  new StyleExtHtmlWebpackPlugin({
    minify: true
  })
]

8.preload外掛優化請求時間

plugins: [
  new PreloadWebpackPlugin({
    rel: 'preload',
    as: 'script',
    include: 'all'
  })
]

9.UglifyJsPlugin配置優化

new UglifyJsPlugin({ 
    // 最緊湊的輸出 
    beautify: false, 
    // 刪除所有的註釋 
    comments: false, 
    compress: { 
      // 在UglifyJs刪除沒有用到的程式碼時不輸出警告   
      warnings: false, 
      // 刪除所有的 `console` 語句 
      // 還可以相容ie瀏覽器 
      drop_console: true, 
      // 內嵌定義了但是隻用到一次的變數 
      collapse_vars: true,
      // 提取出出現多次但是沒有定義成變數去引用的靜態值 
      reduce_vars: true, 
    } 
})

10.引用某個資料夾中的所有檔案(webpack1有效，webpack2以上版本未知)

如果你希望達到如下的效果:

require('./behaviors/*') /* Doesn't work! */

你需要使用require.context:

//出處 http://stackoverflow.com/a/30652110/873870

function requireAll (r) { r.keys().forEach(r) }

requireAll(require.context('./behaviors/', true, /\.js$/))s

各種require引用用法，參考此文

 


參考：https://juejin.im/post/59b9d2336fb9a00a636a3158
         http://web.jobbole.com/93676/

相關文章