webpack打包优化解决方案
单页应用首次进入项目会获取一部分数据,之后将JS包分片,走到那块再去加载那块的JS。 这里介绍一些常用的webpack打包优化解决方案
一、查看项目打包webpack有个插件,可以查看项目一共打了多少包,每个包的体积,每个包里面的包情况。 npm intall webpack-bundle-analyzer --save-dev 同时在webpack.config.js配置 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; webpackConfig.plugins.push(new BundleAnalyzerPlugin()); 在package.json中添加命令 “script”: { "analyz": "NODE_ENV=production npm_config_report=true npm run deploy:prod" } 我的webpack是1.X的 webpack 2.X的同学请看 然后命令行输入 npm run analyz 开始构建,根据项目大小不同,时间也不同。
可以清晰的看到项目中一共有多少个包,包的体积是多少,里面加载了哪些东西,大小是多少。
可以看到五颜六色的十分好看。 二、webpack外部扩展列出了项目中较大的包,剩下的事情就是想办法如何减小这些包的体积(将一个大包拆成多个小包)。
对于这两个问题,我们可以从两个方面着手解决:
这里面第二项涉及到改动业务代码,具体的情况就不同了,适合查看 如何优化JS代码。 要知道这些依赖是我们需要的,不可能排除不引入。 具体做法: 总结需要抽离的公共依赖。这些依赖需要满足一定的条件:
常见的满足这类条件的包有:
另外一些包文件如 Antd库文件,整个包较大,但是每次用什么取什么的话,库文件也会按需加载,不必单独取出。 使用CDN引入资源以我的demo为例:我需要抽离出的文件有 react,react-dom,react-router,redux,react-redux,history。 <head> <title>React Starter Kit</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <!-- 体积较大的包 --> <script src="https://cdn.bootcss.com/react/15.0.0/react-with-addons.min.js"></script> <script src="https://cdn.bootcss.com/react/15.0.0/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/react-router/3.0.0/ReactRouter.min.js"></script> <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script> <script src="https://cdn.bootcss.com/react-redux/5.0.1/react-redux.min.js"></script> <script src="https://cdn.bootcss.com/history/4.5.0/history.min.js"></script> </head> 配置webpack.conf.js资源已经引入,接下来需要配置webpack,使其打包的时候不在将这些资源打包。 const webpackConfig = { name: 'client',target: 'web',devtool: config.compiler_devtool,resolve: { root: paths.client(),extensions: ['','.js','.jsx','.json'],},externals: { 'react': 'React','react-dom': 'ReactDOM','react-router': 'ReactRouter','redux': 'Redux','history': 'History' },module: {},} 这里externals告诉webpack那些资源从哪里寻找。 配置vendor.js接下来配置vendor,使vendor也不打包该些JS compiler_vendors : [ // 'react',// 'react-redux',// 'react-router',// 'redux',], 接下来再次运行
对比第一次的效果图,很明显app.js由原来的625kb减少到了78kb, 三、DLL方式dll 全称是:dynamic link library(动态链接库) 新建webpack.dll.config.jsconst webpack = require('webpack'); module.exports = { entry: { bundle: [ 'react','react-dom',//其他库 ],output: { path: './build',filename: '[name].js',library: '[name]_library' },plugins: [ new webpack.DllPlugin({ path: './build/bundle.manifest.json',name: '[name]_library',}) ] }; webpack.DllPlugin选项:
运行文件运行: 生成两个文件,一个是打包好的bundlejs,另外一个是bundle.mainifest.json,大致内容如下: { "name": "bundle_library","content": { "./node_modules/react/react.js": 1,"./node_modules/react/lib/React.js": 2,"./node_modules/process/browser.js": 3,"./node_modules/object-assign/index.js": 4,"./node_modules/react/lib/ReactChildren.js": 5,"./node_modules/react/lib/PooledClass.js": 6,"./node_modules/react/lib/reactProdInvariant.js": 7,//其他引用 } 配置webpack.config.jsconst webpack = require('webpack'); var path = require('path'); module.exports = { entry: { main: './main.js',output: { path: path.join(__dirname,"build"),publicPath: './',filename: '[name].js' },module: { loaders:[ { test: /.(png|jpg)$/,loader: 'url-loader?limit=8192'},{ test: /.jsx?$/,loaders: ['babel-loader?presets[]=es2015&presets[]=react'],include: path.join(__dirname,'.') } ] },plugins: [ new webpack.DllReferencePlugin({ context: '.',manifest: require("./build/bundle.manifest.json"),}),] }; webpack.DllReferencePlugin的选项中:
参考链接:
完整的项目demo (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |