webpack學習筆記—CodeSplitting

個人環境

• win 10
• node v10.13.0
• npm 6.13.4
• webpack 4.43.0
• webpack-cli 3.3.12
• webpack-dev-server 3.11.0
• webpack-merge 5.0.7

引言

在開發中，咱們開發單頁應用時，代碼愈來愈多，還引入了不少第三方庫，打包後的代碼就會很大。每次要下載好久，用戶訪問時下載也很慢，從新訪問頁面時，又要加載這麼大的文件。若是咱們能把代碼拆分開，業務邏輯代碼和第三方庫的代碼分離，那業務改變時，只會從新加載業務邏輯代碼，第三方的代碼被緩存下來。若是沒有webpack，咱們就要手動去實現這樣的功能，可是有webpack就變得很容易了。

操做

首先會手動去實現代碼分離，而後再利用webpack的配置，去實現相對應的效果。

1.手動實現

1.1

以lodash作實驗，咱們先安裝，它是一個模塊化的工具庫，能夠簡化array、number、objects、string 的使用
npm i lodash -D

1.2

而後去在src目錄建立一個ventor.js，書寫如下內容

import _ from 'lodash'
window._ = _;

在src目錄建立index.js書寫如下內容

console.log(_.join(["1","2","3"]),"fff");
console.log(_.join(["1","2","3"]),"ttt");

1.3

webpack的entry配置以下便可

entry:{
        ventor:'./src/ventor.js',
        bundle:'./src/index.js',
    },

2.經過webpack配置實現

2.1

index.js文件以下,刪掉ventor.js

import _ from 'lodash'
console.log(_.join(["1","2","3"]),"fff");
console.log(_.join(["1","2","3"]),"ttt");

2.2

entry的配置也要改一下

entry:{
        // ventor:'./src/ventor.js',
        bundle:'./src/index.js',
    },

2.3

每次都手動實現太繁瑣了，webpack能夠經過配置或者plugin去實現，這裏加入了optimization配置項去實現。

optimization:{  //加入CodeSpliting
        splitChunks:{
            chunks:'all'
        }
    },
    output:{
        // publicPath:"./",
        filename: '[name].js',
        path: path.resolve(__dirname,'dist')
    },

2.4

運行打包命令

npm run bundle

能夠看見dist目錄下，webpack幫咱們自動拆分了代碼

3.異步import

webpack4若是咱們不使用同步import，也可使用異步import（要記得配置一下babel，默認不支持這種試驗性語法），使用異步import的話，webpack會自動CodeSpliting

總結

這裏學會了使用webpack去拆分代碼，提升js的打包和加載性能。