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