项目背景
最近项目里有个webpack版本较老的项目,由于升级和换框架暂时不被leader层接受o(╥﹏╥)o,只能在现有条件进行优化。
webpack3 + react16
webpack v3配置检查
很明显项目的配置是从v1继承过来的,v1->v3的升级较为简单,参考官网https://webpack.js.org/migrate/3/即可。
loaders变为rules
不再支持链式写法的loader,json-loader不需要配置
UglifyJsPlugin插件需要自己开启minimize
分析现有包的问题
使用webpack-bundle-analyzer构建包后,如图
问题非常明显:
除了zxcvbn这个较大的包被拆出来,代码就简单的打包为了vender和app,文件很大。
动态import拆分vender
分析vender的代码,某些大包,例如libphonenumber.js,使用场景不是很频繁,将它拆出来,当使用到相关特性时再请求。
参考react官方代码分割指南, https://react.docschina.org/docs/code-splitting.html#import
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/docs/code-splitting.html#route-based-code-splitting。
拆分前示例:
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/docs/code-splitting.html#named-exports 。
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版本之间也有点差异,拆包思路就是提取公共,根据使用场景按需加载。
更新动态
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]