技術標籤：JSwebpackbundlecss首屏載入優化

Intro

優化目的：應用首屏載入時間太久，按不同策略/角度分離打包檔案。

步驟

• 安裝依賴
  npm install -D mini-css-extract-plugin

• 配置webpack配置檔案

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ...
  
  plugins: [
    new HtmlWebpackPlugin({ template: "public/index.html"
 
 }),
    new MiniCssExtractPlugin({
      filename: "[hash:3].[name].css?v=[hash]",
      chunkFilename: "[hash:3].[id].css?v=[hash]",
      ignoreOrder: false,
      linkType: "text/css",
    }),
    // ...
  ],

  module: {
    rule: [
      // 處理CSS|less資源
      {
        test:
 
 /\.(css|less)$/,
        use: [
          // mini-css-extract-plugin 和 style-loader 是一樣的功能(將JS字串嵌入<style>標籤內)，不可以同時使用。
          MiniCssExtractPlugin.loader,
          // { loader: "style-loader" }, // 利用JS字串建立樣式節點 即<style>標籤
          { loader: "css-loader" },   // CSS -> CommonJS模組
 

          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true,  // 解決報錯： Inline JavaScript is not enabled. Is it set in your options?
              },
            },
          },  // 編譯： less -> CSS
        ],
      },
    ],
  },
  
};

啟動專案(開發環境或生產皆可)

通過對比，可看出在配置 mini-css-extract-plugin 的前後：
配置前：請求一個完整的JS檔案。
配置後：請求獨立的css與JS檔案，檔案大小之和等於之前整個JS檔案的大小。

未分離css時(注意勾選Disable cache選項)：

分離css之後：