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 的打包和加载性能。