webpack優化

1.libraryTarget 和 library

當用 Webpack 去構建一個能夠被其餘模塊導入使用的庫時須要用到它們。

• output.libraryTarget 配置以何種方式導出庫

• output.library 配置導出庫的名稱output.libraryTarget是字符串的枚舉類型，支持如下配置。

  1.1 var (默認)

  編寫的庫將經過var被賦值給經過library指定名稱的變量。

  1.2 DLL

  .dll爲後綴的文件稱爲動態連接庫，在一個動態連接庫中能夠包含
• 給其餘模塊調用的函數和數據
• 把基礎模塊獨立出來打包到單獨的動態鏈接庫裏

• 當須要導入的模塊在動態鏈接庫裏的時候，模塊不能再次被打包，而是去動態鏈接庫裏獲取
  dll-plugin

  1.3 定義Dll

  DllPlugin插件： 用於打包出一個個動態鏈接庫。
  DllReferencePlugin:在配置文件中引入DllPlugin插件打包好的動態鏈接庫。

二、HappyPack

安裝：

npm i happypack@next -D

1.構建須要解析和處理文件,文件讀寫和計算密集型的操做太多後速度會很慢。
2.Node.js 之上的 Webpack 是單線程模型。
3.HappyPack就能讓Webpack把任務分解給多個子進程去併發的執行，子進程處理完後再把結果發送給主進程。

const HappyPack = require('happypack');
rules: [
{
    test: /\.js$/,
    // 把對 .js 文件的處理轉交給 id 爲 babel 的 HappyPack 實例
    use: ['happypack/loader?id=babel'],
    exclude: path.resolve(__dirname, 'node_modules'),
},
{
    test: /\.css$/,
    // 把對 .css 文件的處理轉交給 id 爲 css 的 HappyPack 實例
    use: ['happypack/loader?id=css']
}
]
new HappyPack({
    //用惟一的標識符 id 來表明當前的 HappyPack 是用來處理一類特定的文件
    id: 'babel',
    // 如何處理 .js 文件，用法和 Loader 配置中同樣
    use:[{
            loader: 'babel-loader',
                options: {
                presets:['env','stage-0','react']
            }
        }]
}),
new HappyPack({
    //用惟一的標識符 id 來表明當前的 HappyPack 是用來處理一類特定的文件
    id: 'css',
    // 如何處理 .css 文件，用法和 Loader 配置中同樣
    use:['style-loader','css-loader'],
    threads: 4, //表明開啓幾個子進程去處理這一類型的文件
    verbose: true //是否容許輸出日誌
})

三、CDN

CDN 又叫內容分發網絡，經過把資源部署到世界各地，用戶在訪問時按照就近原則從離用戶最近的服務器獲取資源，從而加速資源的獲取速度。

1.HTML文件不緩存，放在本身的服務器上，關閉本身服務器的緩存，靜態資源的URL變成指向CDN服務器的地址。
2.靜態的JavaScript、CSS、圖片等文件開啓CDN和緩存，而且文件名帶上HASH值。
3.爲了並行加載不阻塞，把不一樣的靜態資源分配到不一樣的CDN服務器上。

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]_[hash:8].js',
    publicPath: 'http://img.zhufengpeixun.cn'
},

五、Tree Shaking

Tree Shaking 能夠用來剔除JavaScript中用不上的死代碼。它依賴靜態的ES6模塊化語法，例如經過import和export導入導出。

5.1. 不要編譯ES6模塊

use:[{
      loader: 'babel-loader',
      options: {
                presets:[['env',{modules: false }],'stage-0','react']
                }
      }]

5.2 顯示未使用的導出實例

npx webpack --display-used-exports

九、用 HMR 提升開發效率

• HMR 全稱是 Hot Module Replacement，即模塊熱替換 Hot.
• Reloading，當代碼變動時通知瀏覽器刷新頁面，以免頻繁手動刷新瀏覽器頁面 HMR 能夠理解爲加強版的 Hot.
• Reloading，但不用整個頁面刷新，而是局部替換掉部分模塊代碼而且使其生效
  

webpack.config.js

const webpack = require('webpack')
    module.exports = {
      devServer: {
        hot: true // dev server 的配置要啓動 hot，或者在命令行中帶參數開啓
      },
      plugins: [
        new webpack.NamedModulesPlugin(), // 用於啓動 HMR 時能夠顯示模塊的相對路徑
        new webpack.HotModuleReplacementPlugin(), // Hot Module Replacement 的插件
      ],
    }

hello.js

module.exports = function () {
    console.log('hello');
}

let hello = require('./hello');
hello();
if (module.hot) {
    module.hot.accept('./hello', function() {
        let hello = require('./hello');
        hello();
    })
}

輸出分析

webpack --profile --json > stats.json