性能優化篇---Webpack構建代碼質量壓縮

時間 2019-11-07

原文原文鏈接

Webpack構建速度優化基本優化完畢，接下來考慮的就是：線上代碼質量的優化，即如何使用webpack構建出高質量的代碼
Webpack構建流程：初始化配置參數 -> 綁定事件鉤子回調 -> 肯定Entry逐一遍歷 -> 使用loader編譯文件 -> 輸出文件

提綱

本次優化構建代碼質量基本技術：

reactRouter按需加載；
公共代碼提取，以及代碼壓縮；
CDN接入；
開啓gzip壓縮；
接入treeShaking，剔除無用代碼
開啓Scope Hoisting

（生產環境代碼構建）爲實時查看每次配置後代碼構建狀況，使用Webpack監聽文件避免每次手動build，而且開啓webpack-jarvis，實時查看構建分析，npm i -D webpack-jarvis。
開啓監聽模式

watch: true,
watchOptions: {
    ignored: /node_modules/, // 忽略監聽文件
    aggregateTimeout: 300,  //文件變更後多久發起構建
    poll: 1000,  //每秒詢問次數，越小越好
}

1、react-router4實現按需加載

單頁應用按需加載通常原則：css
1. 將網站劃分紅一個個小功能，在按照每一個功能的相關度將他們分紅幾個類；
2. 將沒一個類合併成一個chunk，按需加載對應的代碼；
3. 不可將用戶首次進入網站時須要看到畫面的對應功能Chunk按需加載；
被分割出去的代碼的加載須要必定的觸發時機，即當用戶操做了或者即將操做對應功能時再去加載對應的代碼（默認使用react-router按需加載的觸發條件是路由的變化）
實現條件：node
1. 使用插件：npm i react-loadable;
2. 配合bable插件npm i @babel/plugin-syntax-dynamic-import;
代碼示例：

// .bablerc
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

// 示例代碼
Loadable({
  loader: () => import('./component'), //按需加載組件
  loading: Loading, //處理組件加載的loading、error等
  delay: 300  //延遲加載避免loading的閃爍問題
});

// Loading組件自定義
// 接受三個props，其中pastDelay：等待時觸發；timedOut：超時時觸發超過delay；error：出錯觸發默認爲200ms
const Loading = ({ pastDelay, timedOut, error }) => {
    if (pastDelay) {
      return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>
    } else if (timedOut) {
      return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>
    } else if (error) {
      return <div>Error!</div>;
    }
    return null;
};

2、提取公共代碼`webpack.optimization`

optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        vendors: { 
            test: /node_modules/,
            name: 'vendors', 
            minSize: 0,
            minChunks: 1, 
            chunks: 'initial',
            priority: 2 // 該配置項是設置處理的優先級，數值越大越優先處理 
        },
        commons: {
          name: "comomns",
          test: resolve("src/components"), // 可自定義拓展規則
          minChunks: 2, // 最小共用次數
          minSize:0,   //代碼最小多大，進行抽離
          priority: 1, //該配置項是設置處理的優先級，數值越大越優先處理 
        }
    }
}

3、壓縮文件`js\css`

使用npm i -D webpack-parallel-uglify-plugin啓用多線程並行壓縮JS

optimization: {
    minimizer: [
        new ParallelUglifyPlugin({
            cacheDir: '.cache/', //緩存壓縮，默認不緩存，設置存放位置開啓
            test: /.js$/, //匹配須要壓縮的文件，默認爲/.js$/和Loader配置同樣
            //include: [], 使用正則去選擇須要被壓縮的文件和Loader配置同樣
            //exclude: [], 使用正則去去除不須要被壓縮的文件和Loader配置同樣
            //workerCount: 2, 開啓幾個子進程併發執行壓縮
            // sourceMap: false, 是否輸出source Map，開啓會致使壓縮變慢
            // uglifyJS: {}, 用於壓縮ES6代碼不可和uglifyJS同時使用
            uglifyJS:{//壓縮ES5代碼
                output: {
                    // 是否輸出可讀性較強的代碼，即會保留空格和製表符，默認爲輸出，爲了達到更好的壓縮效果，能夠設置爲false
                    beautify: false,
                    //是否保留代碼中的註釋，默認爲保留，爲了達到更好的壓縮效果，能夠設置爲false
                    comments: false
                },
                compress: {
                    //是否在UglifyJS刪除沒有用到的代碼時輸出警告信息，默認爲輸出
                    warnings: false,
                    //是否刪除代碼中全部的console語句，默認爲不刪除，開啓後，會刪除全部的console語句
                    drop_console: true,
                    //是否內嵌雖然已經定義了，可是隻用到一次的變量，好比將 var x = 1; y = x, 轉換成 y = 1, 默認爲否
                    collapse_vars: true,
                    // 提取出現屢次可是沒有定義成變量去引用的靜態值
                    reduce_vars:true
                }
            },
        }),
    ]
},

提取和壓縮Cssreact
1. 使用插件：optimize-css-assets-webpack-plugin、mini-css-extract-plugin
2. 使用示例：

// 提取css到單獨的文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// optimizeCssPlugin CSS文件壓縮插件
const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

const extractSCSS = new MiniCssExtractPlugin({
    filename: 'css/[name].[contenthash:8].css',
    chunkFilename: 'css/[name]_[contenthash:8].css',
    fallback:'style-loader'
});
...
...
plugins: [
    new optimizeCssPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: { removeAll: true } },
        canPrint: true
    }),
]

webpack配置接入CDN

CDN
網站接入CDN，須要將網頁的靜態資源上傳到CDN服務器，使用CDN地址訪問；

使用CDN能夠決解資源並行下載限制，處理靜態資源Cookie同域名攜帶等問題；
CDN緩存和回源須要合理的設置靜態資源hash
接入CDN會引入多個域名，增長域名解析時間，可進行預解析域名<link rel="dns-prefetch" href="//js.dns.com" />

webpack實現接入

output.publicPath設置JavaScript地址
css-loader.publicPath設置CSS導入的資源地址
WebPlugin.stylePublicPath中設置Css文件地址

// JavaScript
output: {
    publicPath: '//js.cdn.com/js/',
    path: path.join(__dirname, '../docs/dist'), // 打包後的文件存放的地方
    // 爲輸出的JavaScript文件名加上Hash值使用`chunkhash`（chunkhash：根據模塊內容變化；hash: 根據每次構建隨機）
    filename: "js/[name].[chunkhash:8].js",
    chunkFilename: "js/[name]-[id].[chunkhash:8].js",
},

開啓gzip壓縮

使用插件：npm i -D compression-webpack-plugin;
webpack配置

const CompressionPlugin = require("compression-webpack-plugin");

plugins: [
    new CompressionPlugin({
        filename: '[path].gz[query]', //目標資源名稱。[file] 會被替換成原資源。[path] 會被替換成原資源路徑，[query] 替換成原查詢字符串
        algorithm: 'gzip',//算法
        test: /\.(js|css)$/,    //壓縮 js 與 css
        threshold: 10240,//只處理比這個值大的資源。按字節計算
        minRatio: 0.8//只有壓縮率比這個值小的資源纔會被處理
    })
]

後臺開啓使用koa

const staticCache = require('koa-static-cache');
import config from './configs';

const app = new Koa();

app.use(staticCache(path.resolve(__dirname, "../dist"), {
    maxAge: 7 * 24 * 60 * 60,
    gzip: true, //開啓
    dynamic: true,
}))

接入treeShaking，剔除無用代碼

Tree Shaking能夠用來找出有用代碼，去除JavaScript中用不上的死代碼；可是它依賴於ES6靜態花模塊語法import\export的導入和導出
webpack接入

修改.babelrc保留ES6模塊話語句

注意新版本babel-preset-env已經預設babel-preset-es2015,babel推薦使用babel-preset-env取代babel-preset-es2015，而且繼續使用babel-preset-es2015會發出警告信息。

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": ["syntax-dynamic-import"]
}

webpack --display-used-exports運行構建帶上--display-used-exports可追蹤到Tree Shaking的工做；
Webpack只能正確的分析出如何剔除死代碼，須要接入UglifyJs處理剔除（配置見上）

開啓Scope Hoistion

scope hoisting即做用域提高;
在構建過程當中，webpack會藉助ES6 模塊化的靜態特性，肯定模塊的依賴關係，將一個bundle中的靜態依賴提高到頂部。（因此須要和接入treeShaking同樣配置Babel開啓ES6模塊化）
原理：分析模塊間的依賴關係，儘量的將零散的模塊合併到一個函數中去，前提不能形成代碼冗餘，所以只有被引用了一次的模塊才能被合併。
接入好處：webpack
1. 代碼體積減小
2. 代碼在運行時由於建立的函數做用域更少了，內存開銷也隨之變小
webpack接入ModuleConcatenationPlugin內置插件

const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
plugins: [
     new ModuleConcatPlugin(), //開啓scope Hoisting
 ],