路由异步加载总结
Closed this issue · 0 comments
lin2006yuo commented
代码分离Code Splitting
webpack在打包的时候会将所有的资源文件都打包到一个bundle中，打包到一个bundle中会有两个问题：
- 当项目日益庞大的时候，打包出的
bundle体积也会越来越大，影响页面加载。 - 由于都打到一个
bundle中，一些可能不会被用到的代码也会被下载下来
这时候就需要将bundle拆开，webpack提供了三种分离代码方式
- 入口起点：使用
entry配置手动地分离代码。 - 防止重复：使用
SplitChunksPlugin去重和分离代码 - 动态导入：通过模块中的内联函数调用来分离代码
异步加载
路由异步加载就是把不同路由对应的页面分割成不同的代码块，然后当路由被访问的时候才加载对应页面
路由异步加载通过动态导入实现，webpack官方文档提供了两种动态导入的方式
- es6
import()语法
import('./async.js')
webpack特有的require.ensure语法
require.ensure([], function(require){
let asyncBundle = require('./async.js')
})
webpack打包的时候会将这些需要动态导入的模块和它引用的所有子模块各自打包到一个bundle中，实现代码分割。
不管是import()语法或者是require.ensure，最终都会被webpack编译成__webpack_require__, __webpack_require__是webpack内部实现模块导入的函数，可以说webpack统一了各种js模块机制：
- es6 module
- CommonJS
- AMD
除了支持上诉三种js模块化语法外，webpack还有自己特有的语法，如上面提到的require.ensure，station工程新路由使用的require.context，更多查看官网。
require.context是否支持动态导入呢？通过查阅官方api，在第四个参数传入lazy，webpack打包的时候就会把他们打到不同的bundle啦
const req = require.context('../js', true, /\.page\.js$/, 'lazy')