乐趣区

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

退出移动版