webpack+react-router实现代码拆分按需加载(下)
2018-03-21 16:07
1111 查看
之前两篇文章中介绍了两种实现代码分离的方法。但是如果我们在一个工程中同时存在多个应用,这些应用可能同时引用了同一个UI组件库例如ant design;那我们在分离成多个chunk时岂不是每一个chunk都会引入了组件库,每一个chunk的size都大于ant design的size如下图:
对于这种情况我们可以使用webpack中Tree shake的功能,将javaScript上下文中未引用的代码(dead code)进行移除,主要依赖于es2015模块系统中的静态结构的特性如 import 和 export。Tree shake功能内置在webpack2中的压缩工具(minifier) -
代码如下:
安装:uglifyjs-webpack-plugin
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin({
sourceMap: true //内部参数如果不穿react会警告,
}),
new webpack.optimize.CommonsChunkPlugin({
// minChunks: 2,
name: 'shared',
filename: 'shared.[chunkhash:5].js'
}),
]
});因为打包之后是部署生产环境的所以我们可以打包压缩的配置放到webpack生产环境的配置中。
这样就可以实现tree shake的功能;通过下图可以查看效果:
可以看到chunk的size得到了极大的降低。
未使用treeShake之前我们的逻辑代码即分离之后的chunk的size 大小以及加载时间:
使用treeShake之后我们的逻辑代码chunk的size 大小以及加载时间:
对于这种情况我们可以使用webpack中Tree shake的功能,将javaScript上下文中未引用的代码(dead code)进行移除,主要依赖于es2015模块系统中的静态结构的特性如 import 和 export。Tree shake功能内置在webpack2中的压缩工具(minifier) -
UglifyJSPlugin
代码如下:
安装:uglifyjs-webpack-plugin
npm install --save-dev uglifyjs-webpack-plugin在webpack配置中的配置如下:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin({
sourceMap: true //内部参数如果不穿react会警告,
}),
new webpack.optimize.CommonsChunkPlugin({
// minChunks: 2,
name: 'shared',
filename: 'shared.[chunkhash:5].js'
}),
]
});因为打包之后是部署生产环境的所以我们可以打包压缩的配置放到webpack生产环境的配置中。
这样就可以实现tree shake的功能;通过下图可以查看效果:
可以看到chunk的size得到了极大的降低。
未使用treeShake之前我们的逻辑代码即分离之后的chunk的size 大小以及加载时间:
使用treeShake之后我们的逻辑代码chunk的size 大小以及加载时间:
webpack+react-router实现代码拆分按需加载(中)
webpack+react-router实现代码拆分按需加载(上)
相关文章推荐
- webpack+react-router实现代码拆分按需加载(上)
- [置顶] React-router-v4 - Webpack 实现按需加载(code-splitting)
- React-router中,结合webpack实现按需加载
- 详解webpack + react + react-router 如何实现懒加载
- react-router4 配合webpack require.ensure 实现异步加载的示例
- React-router中结合webpack实现按需加载实例
- React router+ webpack实现JS按需加载
- React配合Webpack实现代码分割与异步加载
- webpack 代码拆分,按需加载
- EasyDSS高性能流媒体服务器前端重构(五): webpack + vue-router 开发单页面前端实现按需加载
- 在基于 create-react-app 的React项目中进行代码分片、按需加载(code splitting)/ 免webpack配置
- webpack+react-router按需加载入门
- Webpack + react-router 按需加载
- 在webpack应用的入口代码中,实现react相关组件的热重载(hot reload)
- 在react-router4中进行代码拆分的方法(基于webpack)
- Webpack2 + Vue2 + Vue-Router2 如何实现懒加载?
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本
- 关于webpack 启动资源服务器实现热加载 和es6 babel代码转化
- webpack模块化打包,结合react-route实现分文件打包,按需加载