【前端卡頓的優化思路和方案02】實現webpack的chunk文件的命名

webpack + es2015的import()語法進行code splitting時，須要指定chunk name，便於查看chunk具體是什麼文件分離出的。

---

參考vue-router官方文檔的 路由懶加載 部分

vue-router 路由懶加載

• 若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。
• 結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。

一，import() 路由懶加載

• 首先，能夠將異步組件定義爲返回一個 Promise 的工廠函數 (該函數返回的 Promise 應該 resolve 組件自己)：

const Login = () => Promise.resolve({ /* 組件定義對象 */ })

• 第二，在 Webpack 2 中，咱們能夠使用動態 import語法來定義代碼分塊點 (split point)：

import('./Login.vue') // 返回 Promise

• 結合這二者，這就是如何定義一個可以被 Webpack 自動代碼分割的異步組件。

const Login = () => import('./login.vue')

二，webpackChunkName 註釋

• 有時候咱們想把某個路由下的全部組件都打包在同個異步塊 (chunk) 中。只須要使用 命名 chunk，一個特殊的註釋語法來提供 chunk name (須要 Webpack > 2.4)。

const Login = () => import(/* webpackChunkName: "Login" */ './login.vue')

• 而後就能夠在vue-router中引用該組件

const routers = new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        ...

三，在webpack.base.conf.js 和 webpack.prod.conf.js 的 output 導出文件處修改設置

• 具體的修改位置是 filename 和 chunkFilename。若是沒有以前的 webpackChunkName 的註釋的設置，[name]就會使用數字，如1 ，2，3等來命名，數字應該是打包順序，待定。有了註釋的話，如 / webpackChunkName: "Login" /，[name] 就按照 Login 來命名。
• chunkFilename : 非入口(non-entry) chunk 文件的名稱

【注意】webpack.base.conf.js 文件中的 output 修改，影響的是本地開發環境運行的chunk文件的名稱，

【注意】webpack.prod.conf.js 中的修改，影響 經過 npm run build 打包後的chunk文件的名稱。

• 初始的配置爲

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js', // 打包後的文件名 1.js，
    ...

• 修改後的配置爲

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].[hash].js',
    chunkFilename: '[name].chunk.[hash].js', //打包後的文件名 Login.chunk.2f8e6a3b7cd6aaa0d7ba.js
    ...

四，.babelrc 文件 中的 commits 不要設置成 false

• 該問題是一個隱藏的坑，webpack相關issue具體地址，仔細爬樓，後面有相關回應。之後若是用 TypeScript 寫代碼，裏面也有相關的處理方案，此處再也不贅述。
• 以下是一個總結

To sum up, make sure you set:

comments: true in .babalrc (this is the default)
chunkFilename: '[name].....' in your webpack config

If you are using typescript, also make sure:

removeComments: false under compilerOptions in tsconfig.json
module: esnext in tsconfig.json

• 具體代碼位置，刪除該行，webpack默認 comments 爲 true

{
  "comments": false,
  ...

五，syntax-dynamic-import 插件處理 import()

若是您使用的是 Babel，你將須要添加 syntax-dynamic-import 插件，才能使 Babel 能夠正確地解析語法。 插件地址

• 首先安裝插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

• 而後在.babelrc 文件中寫以下配置

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

• 此外，該插件的實現還須要其餘的一些babel插件才能使用，有關內容在babel7的升級文檔中描述