優化js資源加載

按需加載

• 在webpack中按需加載代碼模塊比較簡單，採用動態加載語法import來編寫代碼便可

  // import 做爲一個方法使用，傳入模塊名便可，返回一個 promise 來獲取模塊暴露的對象
    // 註釋 webpackChunkName: "lodash" 能夠用於指定 chunk 的名稱，在輸出文件時有用
    // import 後面的註釋 webpackChunkName: "lodash" 用於告知 webpack 所要動態加載模塊的名稱
    import(/* webpackChunkName: "lodash" */ 'lodash').then((_) => { 
    console.log(_.lash([1, 2, 3])) // 打印 3
    }
    // 須要在配置下輸出代碼塊的文件名
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8].js',
    chunkFilename: '[name].[hash:8].js' // 指定分離出來的代碼文件的名稱
    }

Tree shaking刪除不用的代碼

```
// src/math.js
export function square(x) {
return x * x;
}

export function cube(x) {
return x * x * x;
}

// src/index.js
import { cube } from './math.js' // 在這裏只是引用了 cube 這個方法

console.log(cube(3))
```

• 若是整個項目代碼只是上述兩個文件，那麼很明顯，square 這個方法是未被引用的代碼，是能夠刪掉的。在 webpack 中，只有啓動了 JS 代碼壓縮功能（即便用 uglify）時，會作 Tree shaking 的優化。webpack 4.x 須要指定 mode 爲 production，而 webpack 3.x 的話須要配置 UglifyJsPlugin。啓動了以後，構建出來的結果就會移除 square 的那一部分代碼了。

• 若是你在項目中使用了 Babel 的話，要把 Babel 解析模塊語法的功能關掉，在 .babelrc 配置中增長 "modules": false 這個配置：

  {
  "presets": [["env", { "modules": false }]]
  }

sideEffects

• lodash是一個工具庫，提供了大量的對字符串、數組、對象等常見數據類型的處理函數，可是有的時候咱們只是使用了其中的幾個函數，所有函數的實現都打包到咱們的應用代碼中，其實很浪費。
• lodash 的 ES 版本 的 package.json 文件中已經有 sideEffects: false 這個聲明瞭，當某個模塊的 package.json 文件中有了這個聲明以後，webpack 會認爲這個模塊沒有任何反作用，只是單純用來對外暴露模塊使用，那麼在打包的時候就會作一些額外的處理。

import { forEach, includes } from 'lodash-es'

forEach([1, 2], (item) => {
  console.log(item)
})

console.log(includes([1, 2, 3], 1))
//最終 webpack 不會把 lodash-es 全部的代碼內容打包進來，只是打包了你用到的那兩個方法，這即是 sideEffects 的做用。