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