摘要：這里要介紹的是工作流中的一種很普遍的代碼加工流程正常的業(yè)務(wù)邏輯開發(fā)流程需要經(jīng)過預(yù)處理器如或，然后再經(jīng)過后處理器如進(jìn)行深加工。

還未看的，可以點(diǎn)擊查看上兩篇文章喲：Webpack 最佳實(shí)踐總結(jié)(一)、Webpack 最佳實(shí)踐總結(jié)(二)

好了，這篇是第三篇，也是完結(jié)篇，我感覺這一篇是最亂的一篇，湊合著看吧，不會(huì)讓你失望的

有時(shí)候，前端項(xiàng)目中除了 JavaScript 外，還有一個(gè)更重要的 CSS 需要我們花點(diǎn)精力進(jìn)去。這里主要陳述一下如何將 CSS 加工流整合到 webpack 中，因?yàn)?CSS Modules 的情況比較復(fù)雜，所有暫還未打算介紹更多關(guān)于 CSS Modules 的內(nèi)容

CSS 工作流指什么？好的工作流可以提供開發(fā)效率，節(jié)約開發(fā)成本。這里要介紹的是 CSS 工作流中的一種很普遍的代碼加工流程：正常的 CSS 業(yè)務(wù)邏輯開發(fā)流程需要經(jīng)過 CSS 預(yù)處理器(如 Sass 或 Less)，然后再經(jīng)過后處理器(如 PostCSS)進(jìn)行深加工。Sass 和 less 讓我們吃上"語(yǔ)法糖"去快捷編寫 CSS，PostCSS 可以讓我們不再關(guān)心每條語(yǔ)句是否兼顧不同和不同版本的瀏覽器

在 webpack 上整合 CSS 加工流實(shí)現(xiàn)方式如下：

配置預(yù)處理器

這里以 Sass 作為預(yù)處理器，如下：

// webpack.config.js
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            { loader: "css-loader", options: { minimize: true } },
            "postcss-loader",
            "sass-loader"
          ]
        })
      }
    ]
  }
}

配置后處理器

這里以 PostCSS 作為后處理器，如下：

// webpack.config.js
const webpack = require("webpack");
const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer({
            browsers: [
              "last 3 version",
              "ie >= 10"
            ]
          })
        ],
        context: staticSourcePath
      }
    })
  ]
}

設(shè)置外聯(lián)

// webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// 存放靜態(tài)資源，諸如圖片或者是 normalize.css
const staticSourcePath = path.join(__dirname, "static");

module.exports = {
  // ...
  entry: {
    // 設(shè)置入口文件，順序是靜態(tài)資源 -> custom.scss -> 項(xiàng)目里其他 scss
    base: path.resolve(staticSourcePath, "src/public/custom.scss")
  },
  // ...
  plugins: [
    // 創(chuàng)建  標(biāo)簽，并將 src 指向最終生成的 CSS 文件，需要 html-webpack-plugin
    new ExtractTextPlugin({
      filename: "[name].[contenthash].css",
      allChunks: true
    })
  ]
}

以 Moment.js 和 Lodash 為例

Moment.js(v2.18.1) 是一個(gè)用于日期的 JavaScript 庫(kù)，默認(rèn)情況下，只有你安裝它到你的項(xiàng)目中，即使壓縮后，也會(huì)占據(jù)217kb大小。相對(duì)于在2017年8月1日的統(tǒng)計(jì)，對(duì)比與 JavaScript 的 446kb 的平均大小，這是實(shí)在是太大了。不過 webpack 可以去掉 Moment.js 其中無用的代碼。

其中有 165kb 的大小是用于本地化的語(yǔ)言包，即便你不去用它們，它們?cè)谀J(rèn)的情況下也會(huì)被包含進(jìn)來。如下代碼來自 moment 的 gitihub

// moment/src/lib/locale/locales.js
function loadLocale(name) {
    var oldLocale = null;
    // TODO: Find a better way to register and load all the locales in Node
    if (!locales[name] && (typeof module !== "undefined") &&
            module && module.exports) {
        try {
            oldLocale = globalLocale._abbr;
            require("./locale/" + name);
            // because defineLocale currently also sets the global locale, we
            // want to undo that for lazy loaded locales
            getSetGlobalLocale(oldLocale);
        } catch (e) { }
    }
    return locales[name];
}

上面的代碼會(huì)使 Moment.js 在運(yùn)行期間動(dòng)態(tài)地選擇相應(yīng)文件去加載。

要解決它需要用到 ContextReplacementPlugin，一款替換上下文的插件，例子如下：

// webpack.config.js
const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      // 需要被處理的文件目錄位置
      /moment[/]locale/,
      // 正則匹配需要被包括進(jìn)來的文件
      /(en|zh-cn).js/
    )
  ]
};

Lodash 是一款方便開發(fā) JavaScript 的工具集合，測(cè)試版本為4.17.4。

當(dāng)你項(xiàng)目包含有 Lodash 的時(shí)候，你打包出來的文件至少增加 75kb，多出來的大小包含了 316 個(gè) Lodash 的函數(shù)。如果你只是使用了其中少數(shù)，例如 20 個(gè)，那么大概有 65 kb 是多余的。下面將列出兩種去掉這些多余的代碼的方法：

方法1：

還記得 webpack最佳實(shí)踐(一) 提及的 Tree-shaking 嗎？正因?yàn)橛兴覀兛梢岳眠@個(gè)特性非常容易做到按需引用，如下：

import _ from "lodash";
_.get();

修改為

import get from "lodash/get";
get();

代碼量從 72kb 壓縮到 8.27kb

方法2：

方法1只適合剛開始玩一個(gè)項(xiàng)目的時(shí)候，并不怎么適合玩開了的項(xiàng)目，除非重寫一次，這工作量太大了，另外一個(gè)原因是 lodash 的方法名會(huì)容易跟自定義的函數(shù)名沖突，造成隱藏性bug。方法2就是解決這兩個(gè)問題，那就是使用babel-plugin-lodash

babel-plugin-lodash 是一款通過 babel 去實(shí)現(xiàn)將 lodash 的import用法編譯為最佳實(shí)踐的插件，配置如下：

打開.babelrc，添加下面配置

{
  "plugins": ["lodash"]
}

更多的配置方式可以查看文檔，這里不再作太多介紹。更具體的優(yōu)化效果看下面：

import _ from "lodash";
_.get({ a: { b: 5 } }, "a.b");

上面的代碼是沒有使用babel-plugin-lodash，使用之后，會(huì)被重新編譯為下面：

import _get from "lodash/get";
_get({ a: { b: 5 } }, "a.b");

跟方法1一樣，代碼量從 72kb 壓縮到 8.27kb

當(dāng)然如果你想更進(jìn)一步壓縮代碼，可以嘗試與lodash-webpack-plugin搭配，它會(huì)更深一步地去刪除一些lodash的方法里的代碼。例如_.get默認(rèn)支持深路徑查詢，如果你不需要支持深路徑查詢，你可以開啟這個(gè)插件，這個(gè)方法就會(huì)被去掉這個(gè)支持：

只使用babel-plugin-lodash

import _ from "lodash";
_.get({ a: { b: 5 } }, "a.b");
// → returns 5

使用babel-plugin-lodash和lodash-webpack-plugin 之后

import _get from "lodash/get";
_get({ a: { b: 5 } }, "a.b");
// → returns undefined

代碼量從72kb 壓縮到 772b

scope hoisting 對(duì)于 webpack 來說，就是將以前的模塊引用鏈拍扁為一個(gè)但又不會(huì)影響到已有的代碼。更好理解scope hoisting推薦閱讀：here

目前只有 webpack v3 以上版本才支持scope hoisting，開啟它是需要手動(dòng)配置，如下:

// webpack.config.js
const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

preload-webpack-plugin 讓靜態(tài)資源支持 DNS 預(yù)解析和預(yù)加載，配置如下：

// webpack.config.js
const PreloadWebpackPlugin = require("preload-webpack-plugin");
module.exports = {
  // ...
  plugins: [
    new PreloadWebpackPlugin({
      rel: "preload",
      as: "script",
      include: "all",
      fileBlacklist: [/.(css|map)$/, /base?.+/]
    })
  ]
}

script-ext-html-webpack-plugin 讓 js 加載方式支持 Async 或 defer，配置如下：

// webpack.config.js
const ScriptExtHtmlWebpackPlugin = require("script-ext-html-webpack-plugin");
module.exports = {
  // ...
  plugins: [
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: "defer"
    })
  ]
}

有點(diǎn)亂，不好總結(jié)，大概就是整合 CSS 代碼加工流程到 webpack 中、壓縮第三方庫(kù)(Moment.js 和 Lodash )、啟用scope hoisting和其他好用的插件

大概就這樣，內(nèi)容較多~

文章首發(fā)于：https://www.linpx.com/p/webpa...
歡迎訪問我的博客：https://www.linpx.com