07tree shaking、代碼分割、懶加載、PWA技術

tree shaking

• tree shaking: 去除無用代碼
  前提：1.必須使用ES6模塊化 2.開始production環境
  做用：減小代碼體積

  在package.json中配置
  "sideEffects": false 全部代碼都沒有反作用（均可以進行tree shaking）
  問題： 可能會把css / @babel/polyfill （反作用）文件幹掉
  "sideEffects": [".css", ".less"]

代碼分割

• 從入口分割可分爲單入口和多入口

// 單入口
// entry: './src/js/index.js'
entry: './src/js/index.js',
// 多入口：有一個入口，最終輸出就有一個bundle
/**
entry: {
    main: './src/js/index.js',
    test: './src/js/test.js'
},
 */
output: {
    // [name]: 取文件名
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
},

• 配合optimization參數，配置以下：

/**
 * 1. 能夠將node_modules中代碼單獨打包一個chunk，最終輸出
 * 自動分析多入口chunk中，有沒有公共的文件。若是有，會打包成單獨一個chunk
 */
optimization: {
    splitChunks: {
        chunks: 'all'
    }
},

• 單入口，配合optimization參數配置，經過import動態導入

1. 新建一個test.js文件

export function mul(x,y){
    return x * y;
}

2. 經過import動態導入，webpackChunkName命名文件

import { mul } from './print.js';

/**
 * 經過js代碼，讓某個文件被單獨打包成一個chunk
 * import動態導入語法：能將某個文件單獨打包
 */

import (/* webpackChunkName: 'test' */'./print.js')
.then(({mul, count}) => {
    // 文件加載成功~
    // eslint-disable-next-line
    console.log(mul(3,4));
})
.catch(() => {
    // eslint-disable-next-line
    console.log('文件加載失敗~~');
})

懶加載

• 懶加載：當文件須要使用時才加載
• 預加載prefetch：等其餘資源加載完畢，瀏覽器空閒了，再偷偷加載資源

/**
 * 懶加載：當文件須要使用時才加載
 * 預加載prefetch：會在使用以前，提早加載js文件
 * 正常加載能夠認爲是並行加載（同一時間加載多個文件）
 * 預加載prefetch：等其餘資源加載完畢，瀏覽器空閒了，再偷偷加載資源
 */

import (/* webpackChunkName: 'test', webpackPrefetch: true */'./print.js')
.then(({mul, count}) => {
    // 文件加載成功~
    // eslint-disable-next-line
    console.log(mul(3,4));
})
.catch(() => {
    // eslint-disable-next-line
    console.log('文件加載失敗~~');
})

PWA技術

PWA: 漸進式網絡開發應用程序（離線可訪問）

1. 安裝workbox-webpack-plugin
   npm install workbox-webpack-plugin -D
2. 在webpack.config.js中引入響應配置
   先引入workbox-webpack-plugin，後在插件中配置

/**
  * PWA: 漸進式網絡開發應用程序（離線可訪問）
  *     workbox --> workbox-webpack-plugin
  */
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

在plugins中配置以下：

new WorkboxWebpackPlugin.GenerateSW({
     /**
      * 1. 幫助serviceWorker快速啓動
      * 2. 刪除舊的serviceWorker
      * 
      * 生成一個serviceWorker配置文件~~
      */
     clientsClaim: true,
     skipWaiting: true
 })

3. 在js中註冊serviceWorker，處理兼容性問題

/**
 * 1. eslint不認識window、navigator全局變量
 *   解決： 須要修改package.json中eslintConfig配置
    "eslintConfig": {
            "extends": "airbnb-base",
            "env": {
            "browser": true
        }
    }
    2. serviceWorker代碼必須運行在服務器上
        --> nodejs
        -->
            npm i serve -g
            serve -s build 啓動服務器，將build目錄下全部資源做爲靜態資源暴露出去
 */
// 註冊serviceWorker
// 處理兼容性問題
if ('serviceWorker' in navigator){
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/service-worker.js')
        .then(() => {
            console.log('serviceWorker註冊成功了！！！');
        })
        .catch(() => {
            console.log('serviceWorker註冊失敗 了！！！')；
        })
    })
};

注意：若是引用了eslint，須要在package.json的eslintConfig中配置，由於eslint不認識window、navigator全局變量，配置以下：

"eslintConfig": {
	"extends": "airbnb-base",
	"env": {
	  "browser": true
	}
}