共计 3835 个字符,预计需要花费 10 分钟才能阅读完成。
我的项目背景
最近我的项目里有个 webpack 版本较老的我的项目,因为降级和换框架临时不被 leader 层承受 o(╥﹏╥)o,只能在现有条件进行优化。
webpack3 + react16
webpack v3 配置查看
很显著我的项目的配置是从 v1 继承过去的,v1->v3 的降级较为简单,参考官网 https://webpack.js.org/migrat… 即可。
loaders 变为 rules
不再反对链式写法的 loader,json-loader 不须要配置
UglifyJsPlugin 插件须要本人开启 minimize
剖析现有包的问题
应用 webpack-bundle-analyzer 构建包后,如图
问题非常明显:
除了 zxcvbn 这个较大的包被拆出来,代码就简略的打包为了 vender 和 app,文件很大。
动静 import 拆分 vender
剖析 vender 的代码,某些大包,例如 libphonenumber.js,应用场景不是很频繁,将它拆出来,当应用到相干个性时再申请。
参考 react 官网代码宰割指南,https://react.docschina.org/d…
import {PhoneNumberUtil} from 'google-libphonenumber'
function usePhoneNumberUtil(){// 应用 PhoneNumberUtil}
批改为动静 import()
形式,then 和 async/await 都反对用来获取异步数据
const LibphonenumberModule = () => import('google-libphonenumber')
function usePhoneNumberUtil(){LibphonenumberModule().then({PhoneNumberUtil} => {// 应用 PhoneNumberUtil})
}
当 Webpack 解析到该语法时,会主动进行代码宰割。
批改后的成果:
libphonenumber.js(1.chunk.js)从 vender 中拆分进去了,并且在我的项目理论运行中,只有当进入 usePhoneNumberUtil 流程时,才会向服务器申请 libphonenumber.js 文件。
基于路由的代码宰割
React.lazy
参考 react 官网代码宰割指南 - 基于路由的代码宰割,https://react.docschina.org/d…。
拆分前示例:
import React from 'react';
import {Route, Switch} from 'react-router-dom';
const Home = import('./routes/Home');
const About = import('./routes/About');
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Suspense>
</Router>
);
拆分后示例:
import React, {lazy} from 'react';
import {Route, Switch} from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (// 路由配置不变)
拆分后成果:
app.js 依照路由被 webpack 主动拆分成了不同的文件,当切换路由时,才会拉取指标路由代码文件。
命名导出
该段援用自 https://react.docschina.org/d…。React.lazy
目前只反对默认导出(default exports)。如果你想被引入的模块应用命名导出(named exports),你能够创立一个两头模块,来从新导出为默认模块。这能保障 tree shaking 不会出错,并且不用引入不须要的组件。
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export {MyComponent as default} from "./ManyComponents.js";
// MyApp.js
import React, {lazy} from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));
本人实现 AsyncComponent
React.lazy 包裹的懒加载路由组件,必须要增加 Suspense。如果不想强制应用,或者须要自在扩大 lazy 的实现,能够定义实现 AsyncComponent,应用形式和 lazy 一样。
import AsyncComponent from './components/asyncComponent.js'
const Home = AsyncComponent(() => import('./routes/Home'));
const About = AsyncComponent(() => import('./routes/About'));
// async load component
function AsyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null
state = {Component: AsyncComponent.Component}
componentDidMount() {if (!this.state.Component) {getComponent().then(({default: Component}) => {
AsyncComponent.Component = Component
this.setState({Component})
})
}
}
// component will be unmount
componentWillUnmount() {
// rewrite setState function, return nothing
this.setState = () => {return}
}
render() {const { Component} = this.state
if (Component) {return <Component {...this.props} />
}
return null
}
}
}
common 业务代码拆分
在实现基于路由的代码宰割后,认真看包的大小,发现包的总大小反而变大了,2.5M 减少为了 3.5M。
从 webpack 剖析工具中看到,罪魁祸首就是每一个独自的路由代码中都独自打包了一份 components、utils、locales 一类的公共文件。
应用 webapck 的配置将 common 局部独自打包解决。
components 文件合并导出
示例是将 components 下的所有文件一起导出,其余文件同理
function readFileList(dir, filesList = []) {const files = fs.readdirSync(dir)
files.forEach((item) => {let fullPath = path.join(dir, item)
const stat = fs.statSync(fullPath)
if (stat.isDirectory()) {
// 递归读取所有文件
readFileList(path.join(dir, item), filesList)
} else {/\.js$/.test(fullPath) && filesList.push(fullPath)
}
})
return filesList
}
exports.commonPaths = readFileList(path.join(__dirname, '../src/components'), [])
webpack 配置抽离 common
import conf from '**';
module.exports = {
entry: {
common: conf.commonPaths,
index: ['babel-polyfill', `./${conf.index}`],
},
... // 其余配置
plugins:[new webpack.optimize.CommonsChunkPlugin('common'),
... // other plugins
]
}
在 webpack3 中应用 CommonsChunkPlugin 来提取第三方库和公共模块,传入的参数 common
是 entrty 曾经存在的 chunk, 那么就会把公共模块代码合并到这个 chunk 上。
提取 common 后的代码
将各个路由反复的代码提取进去后,包的总大小又变为了 2.5M。多出了一个 common 的 bundle 文件。(common 过大,其实还能够持续拆分)
总结
webpack 打包还有很多能够优化的中央,另外不同 webpack 版本之间也有点差别,拆包思路就是提取公共,依据应用场景按需加载。