1 前言
这篇文章主要分享使用webpack作为构建工具的SPA项目的代码拆分经验，需要一些基本的webpack知识。
文章内容主要来自于个人开发中的总结以及网上的学习资料，有说的不对或者不准确的地方，欢迎指正。
2 什么是代码拆分
代码拆分是指我们把所有的JS代码拆分为多个JS文件，需要某块代码时再去加载，以加快页面的加载速度.
代码拆分在我看来有三个类型：
- 库代码和业务代码拆分
- 不同路由的代码需要拆分
- 一些特殊操作后才需要显示的内容对应的代码需要拆分
以下会分别讲解
3 分离库代码和业务代码
在开发过程中我们不可避免会使用第三方库，比如JQuery、Vue、React等等，这部分库一般不会发生变化（除非版本升级）。对于这些第三方库的代码，一般有两种处理方式
- 统一打包到一个chunk中
- 使用cdn加载
下面分别讲解
3.1 把第三方库打包到统一的chunk
代码如下，以下代码表示把来自node_modules目录的js文件打包到一起，并命名为lib
new webpack.optimize.CommonsChunkPlugin({
name: 'lib',
minChunks: ({ resource }) => (
resource &&
resource.indexOf('node_modules') >= 0 &&
resource.match(/\.js$/)
)
}),
3.2 使用cdn加载第三方库
需要使用webpack的externals属性,配置示例如下：
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'react-router': 'ReactRouter',
...
},
然后在html中需要手动加入script标签来引入,也可以自己写webpack插件来自动生成。我自己写的插件代码如下
function InsertScript(paths) {
this.paths = paths || []
}
InsertScript.prototype.apply = function (compiler) {
var paths = this.paths
compiler.plugin('compilation', function (compilation, options) {
compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callback) {
paths.reverse().forEach(function(path) {
htmlPluginData.assets.js.unshift(path)
})
callback(null, htmlPluginData)
})
})
}
module.exports = InsertScript
3.3 混合方案
我们引用的第三方库既有react这种稳定的库，也可能引入antd、lodash这种可以按需加载的库。个人觉得对于react这种库适合cdn引入；而antd这种库因为按需加载会造成经常变化，所以适合单独打包。
4 根据路由进行代码拆分(以react为例)
以下是使用对象方式配置react-router的简单例子
import Home from 'path-to-home'
import About form 'path-to-about'
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
4.1 使用require.ensure
针对webpack 1.X版本。进行修改如下
import Home from 'path-to-home'
const About = (location, cb) => {
require.ensure([], require => {
cb(null, require('path-to-about').default)
}, 'about')
}
const routes = [
{ path: '/home', component: Home },
{ path: '/about', getComponent: About }
]
4.2 使用动态import
针对webpack 2.4版本以后,利用import返回的是promise
先编写lazyLoad.js, 如下
// lazyload.js
import React from 'react'
const Loading = () => (
<div>
页面加载中....
</div>
)
const Err = () => (
<div>
页面加载失败
</div>
)
const lazyLoad = (getComponent) => {
class LazyLoadWrapper extends React.Component {
state = { Component: undefined }
componentWillMount () {
getComponent()
.then((esModule) => { this.setState({ Component: esModule.default }) })
.catch(() => { this.setState({ Component: Err }) })
}
render () {
const { Component = Loading } = this.state
return <Component {...this.props} />
}
}
return LazyLoadWrapper
}
export default lazyLoad
路由配置修改如下
import lazyLoad from 'path-to-lazyload'
import Home from 'path-to-home'
const About = lazyLoad(() => (
import(/* webpackChunkName: "about" */ 'path-to-about')
))
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
