小說系統開發中，值得一看的效能優化重點

1、將 CSS 放在檔案頭部，JavaScript 檔案放在底部

• CSS 執行會阻塞渲染，阻止 JS 執行
• JS 載入和執行會阻塞 HTML 解析，阻止 CSSOM 構建

2、使用字型圖示 iconfont 代替圖片圖示

3、善用快取，不重複載入相同的資源

4、壓縮檔案

• JavaScript：UglifyPlugin
• CSS ：MiniCssExtractPlugin
• HTML：HtmlWebpackPlugin

npm install compression-webpack-plugin --save-dev
npm install compression

const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
  plugins: [new CompressionPlugin()],
}

const compression = require('compression')
// 在其他中介軟體前使用
app.use(compression())

5、圖片優化

<img data-src="

const img = document.querySelector('img')
img.src = img.dataset.src

<picture>
	<source srcset="banner_w1000.jpg" media="(min-width: 801px)">
	<source srcset="banner_w800.jpg" media="(max-width: 800px)">
	<img src="banner_w800.jpg" alt="">
</picture>

@media (min-width: 769px) {
	.bg {
		background-image: url(bg1080.jpg);
	}
}
@media (max-width: 768px) {
	.bg {
		background-image: url(bg768.jpg);
	}
}

npm i -D image-webpack-loader

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000, /* 圖片大小小於1000位元組限制時會自動轉成 base64 碼引用*/
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    /*對圖片進行壓縮*/
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}

6、通過 webpack 按需載入程式碼，提取第三庫程式碼，減少 ES6 轉為 ES5 的冗餘程式碼

output: {
	filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    path: path.resolve(__dirname, '../dist'),
}，

optimization: {
  	runtimeChunk: {
        name: 'manifest' // 將 webpack 的 runtime 程式碼拆分為一個單獨的 chunk。
    },
    splitChunks: {
        cacheGroups: {
            vendor: {
                name: 'chunk-vendors',
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                chunks: 'initial'
            },
            common: {
                name: 'chunk-common',
                minChunks: 2,
                priority: -20,
                chunks: 'initial',
                reuseExistingChunk: true
            }
        },
    }
}，

• test:用於控制小說系統開發中哪些模組被這個快取組匹配到。原封不動傳遞出去的話，它預設會選擇所有的模組。可以傳遞的值型別：RegExp、String和Function;
• priority：表示抽取權重，數字越大表示優先順序越高。因為一個 module 可能會滿足多個 cacheGroups 的條件，那麼抽取到哪個就由權重最高的說了算；
• reuseExistingChunk：表示是否使用已有的 chunk，如果為 true 則表示如果當前的 chunk 包含的模組已經被抽取出去了，那麼將不會重新生成新的。
• minChunks（預設是1）：在分割之前，這個程式碼塊最小應該被引用的次數（譯註：保證程式碼塊複用性，預設配置的策略是不需要多次引用也可以被分割）
• chunks (預設是async) ：initial、async和all
• name(打包的chunks的名字)：字串或者函式(函式可以根據條件自定義名字)

class Person {}

"use strict";
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
var Person = function Person() {
  _classCallCheck(this, Person);
};

"use strict";
var _classCallCheck2 = require("@babel/runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}
var Person = function Person() {
  (0, _classCallCheck3.default)(this, Person);
};

npm i -D @babel/plugin-transform-runtime @babel/runtime

"plugins": [
        "@babel/plugin-transform-runtime"
]