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