tree shaking

1. tree shaking 去掉我們沒有使用的代碼
   滿足條件自動開啟
   1. 使用ES6模塊化語法
   2. 開啟webpack生產(chǎn)環(huán)境配置
   3. 可以在配置文件中使用sideEffects,*號代表全選

"sideEffects": [
    "*.css"
  ],

caching

1. cacheing緩存,當我們設置強制緩存后使用contenthash值,這樣修改文件就會讓hash值變化,重而走服務器
   1. hash webpack每次打包都會生成一個唯一的hash值，問題：所有資源會共享同一個hash值，一個文件變化，會導致所有文件緩存失效
   2. chunkhash webpack每次打包生成的chunk（打包輸出文件）分別生成一個唯一的hash值。 問題：如果文件一開始在一起，會是同一個hash值
   3. contenthash 每一個輸出文件都會生成一個唯一的hash值，這個hash值是根據(jù)文件內(nèi)容生成的， 解決：不同文件，使用不同的hash

        filename: './js/[contenthash:10].js'
        filename: 'css/[contenthash:10].css',
        chunkFilename: 'css/[contenthash:10].css',//多個css文件走這個

code splitting

1. code splitting  就是提取出公共的代碼部分成為單獨文件,只有大于10kb左右的文件會被提取

entry: { // 多入口 并沒有優(yōu)化
    main1: './src/js/index.js',
    main2: './src/js/module1.js'
  },   
  output: {
    path: resolve(__dirname, 'build'),
    filename: './js/[name].js'
  },

2. 多入口優(yōu)化

entry: { // 多入口 并沒有優(yōu)化  不用下包
    main1: './src/js/index.js',
    main2: './src/js/module1.js'
  },   
  output: {
    path: resolve(__dirname, 'build'),
    filename: './js/[name].js'
  },
optimization: {   //獨立的不在基本的插件中
    splitChunks: {
      chunks: "all"
    }
  }

3.單入口優(yōu)化
需要使用es10的動態(tài)引入

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: './js/[name].js',
    chunkFilename: "./js/[name].chunk.js" //提取出來的代碼的名字
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  mode: 'development',
};

import(/* webpackChunkName: "module1" */'./module1').then(({default: add}) => {
  console.log(add(2, 2));             提取代碼的名字
});

lazy loading

1 ,預加載和懶加載
1. 預加載就是使用webpackPrefetch: true,這樣會在瀏覽器空閑的時候偷偷加載.并且變成link標簽加載,在事件和定時器中也是一樣,但和強制加載兼容性都很差
2. 懶加載就是使用事件或定時器到了在加載
3. 和其對于的還有一個webpackPreload 不管空不空閑 都要強制加載而且不能在事件中.

document.getElementById('btn').onclick = function () {  //得使用es10的新語法
  import(/* webpackChunkName: "module1", webpackPrefetch: true */'./module1').then(({default: add}) => {
    console.log(add(2, 2));
  });
};

dll

1. 單獨打包,每次打包都會重新構(gòu)建一些沒有動過的代碼這個時候使用這個就會快很多,性能優(yōu)化在本地的打包速度.將一部分基本不會改動的代碼或者庫單獨的打包.
   配置一個單獨的webpack.dll文件

const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    jquery: ['jquery']
  },
  output: {
    path: resolve(__dirname, '../dll'),
    filename: '[name].js',
    library: '[name]' // 向外暴露全局jquery， 當其他文件引入jquery時，引入的就是library暴露的jquery
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: resolve(__dirname, '../dll/manifest.json')
    })
  ],
  mode: 'production',
};

//下載webpack包

new webpack.DllReferencePlugin({
      manifest: resolve(__dirname, '../dll/manifest.json')
    }),
    new AddAssetHtmlPlugin({ // 加載提前打包好的jquery
      filepath: resolve(__dirname, '../dll/jquery.js'),
      outputPath: 'js',
      publicPath: 'js',
    }),

shimming

1. 將一個庫暴露成全局變量,這樣在文件的任何地方都可以直接使用這個變量.

new webpack.ProvidePlugin({
      $: 'jquery'
    })

漸進式網(wǎng)絡應用 workbox-webpack-plugin

1.在斷網(wǎng)的情況下也可以訪問頁面,不會出現(xiàn)往網(wǎng)絡錯誤的提示 需要開啟服務器
下載 workbox-webpack-plugin

new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })

暴露出去的入口模塊
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('SW registered: ', registration);
    }).catch(registrationError => {
      console.log('SW registration failed: ', registrationError);
    });
  });
}

多線程打包

1. 主要針對耗時的打包任務如babel直接放置在他們的前面如第一位,下包
2. 不耗時的任務可能會開啟可能會增加時間
   'thread-loader'

cache-loader

一般也是用在babel上,但babel有專門的選擇,cacheDirectory:true 放在options中

oneof

我們打包編譯時,會執(zhí)行全部的loader,所以可以使用oneof,執(zhí)行一個就不往下執(zhí)行,遇到需要執(zhí)行2個的可以拿出來一個,使用方法是直接oneof[各個loader] 格式為 rules:[ { oneOf: [ ] } ]