// 启用sourceMapdevtool: ‘#source-map‘
这个虽然对于改善效果不明显，但是好的分类对于发现问题的本质有很大的帮助。另外，css样式分离后要自己进行压缩。
// *************webpack需要引入的包*************************// 抽离css样式let MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);// 用来压缩分离出来的css样式let OptimizeCss = require(‘optimize-css-assets-webpack-plugin‘); // 用来压缩js let UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘); // *************webpack相关配置部分************************* module.exports = { optimization: { // 优化项 minimizer: [ new OptimizeCss(), // 压缩css new UglifyJsPlugin({ // 压缩js cache: true, // 是否用缓存 parallel: true, // 并发打包 sourceMap: false, // es6 -> es5 转换时会用到 }), ], } // 中间部分省略 // 抽离css样式 plugins: [ new MiniCssExtractPlugin({ filename: ‘css/[name].css‘, // 抽离出来样式的名字 }), ], }
抽离之后，现在项目生成文件的大小是这样。
JS文件的大小
完成上面工作之后，陷入了茫然，网站还是很卡，不知道还能怎么调优，在翻阅了很多网站资料以后，发现了一个依赖关系可视化工具，这对于我来说是一个重大的突破口
// 依赖关系可视化// *************webpack需要引入的包*************************const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer‘);// *************webpack相关配置部分*************************module.exports = { // 启动依赖关系可视化窗口，绑定端口8919 plugins: [ new BundleAnalyzerPlugin({ analyzerPort: 8919 }), ], }
重新进行编译以后的效果图
JS文件的依赖关系图
通过这个效果图可以很明显的看出js文件里面包含什么依赖，我就是通过这个线索来进行优化的。
为了方便我调查，我把共通的依赖部分都抽离出来了。而这个功能是webpack4自带的，如果是之前或者更早版本的webpack，需要引入第三方组件CommonsChunkPlugin这里不做介绍。
module.exports = { optimization: { //打包 公共文件 splitChunks: { cacheGroups: { vendor: { //node_modules内的依赖库 chunks: ‘all‘, test: /[\\/](node_modules)[\\/]/, // 文件路径里面带有node_modules 都抽离出来做共通 name: ‘vendor‘, minChunks: 1, //被不同entry引用次数(import),1次的话没必要提取 maxInitialRequests: 5, minSize: 0, priority: 100, // enforce: true? }, common: { // ‘src/js’ 下的js文件 chunks: ‘all‘, test: /[\\/]src[\\/]js[\\/]/, //也可以值文件/[\\/]src[\\/]js[\\/].*\.js/, name: ‘common‘, //生成文件名，依据output规则 minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, }, }, }, runtimeChunk: { name: ‘manifest‘, }, } }
一开始我对于这个属性的名字难以理解，以至于没有效果,看了下面的文章后全明白了。
效果图如下
JS文件的依赖关系图2
JS文件大小
JS文件大小2
JS解决方案
TS解决方案增加antdIcon.ts代码，引入相应的Icon
// 自己项目里面用到的Iconexport { default as FileOutline, } from ‘@ant-design/icons/lib/outline/FileOutline‘; // antd的message组建内部用到的Icon 把源代码复制过来。 // var iconType = { // info: ‘info-circle‘, // success: ‘check-circle‘, // error: ‘close-circle‘, // warning: ‘exclamation-circle‘, // loading: ‘loading‘ // }[args.type] // message info export { default as InfoCircleTwoTone, } from ‘@ant-design/icons/lib/twotone/InfoCircleTwoTone‘; // message success export { default as CheckCircleTwoTone, } from ‘@ant-design/icons/lib/twotone/CheckCircleTwoTone‘; // message error export { default as CloseCircleTwoTone, } from ‘@ant-design/icons/lib/twotone/CloseCircleTwoTone‘; // message warning export { default as ExclamationCircleTwoTone, } from ‘@ant-design/icons/lib/twotone/ExclamationCircleTwoTone‘; // message loading export { default as LoadingOutline, } from ‘@ant-design/icons/lib/outline/LoadingOutline‘;
修改 webpack 配置
module.exports = { resolve: { modules: [path.resolve(__dirname, ‘./src‘), ‘node_modules‘], // <- 追加代码 extensions: [‘.ts‘, ‘.js‘, ‘.vue‘, ‘.json‘], // <- 追加代码 alias: { vue$: ‘vue/dist/vue.esm.js‘, ‘@ant-design/icons/lib/dist$‘: path.resolve(__dirname, ‘./src/tools/antdIcon.ts‘), // <- 追加代码 }, plugins: [ // <- 追加代码 new TsconfigPathsPlugin({ configFile: path.resolve(__dirname, ‘./tsconfig.json‘), }), ], },
再一次编译,是不是发现已经看不到Icon了，本来就应该这样，我的项目中根本没用几个Icon
依赖效果图3
JS文件的大小,直接减少了500K左右
JS文件大小3
module.exports = { plugins: [ // 只读取（zh-cn）文件。 new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn)$/), ], }
这个是我用到的富文本功能，本身对这个组件不太了解，但又必须要用到，也没什么太好优化方法，索性，把它抽离成一个单独的共通JS文件，这样起码有2个组建同时调用这个富文本的情况下，只有第一个掉用的那个需要引入JS文件，第二次的那个会直接利用浏览器的缓存来调用这个JS文件的，也有一定程度的优化效果。
所以我修改了抽离共通组件的那部分代码
module.exports = { optimization: { splitChunks: { cacheGroups: { vendor: { chunks: ‘all‘, test: /[\\/](quill)[\\/]/, // <- 就是简单修改了下匹配规则 name: ‘vendor‘, minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100, }, common: { chunks: ‘all‘, test: /[\\/]src[\\/]js[\\/]/, name: ‘common‘, minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, }, }, }, runtimeChunk: { name: ‘manifest‘, }, } } 7和8修改之后的效果
依赖关系效果图4
7和8修改之后的JS文件大小
JS文件大小4
// 按需加载的写法import hljs from ‘highlight.js/lib/highlight‘;import javascript from ‘highlight.js/lib/languages/javascript‘; hljs.registerLanguage(‘javascript‘, javascript);
改完文件以后再看依赖关系
依赖关系效果图5
JS文件大小
JS文件大小5
至此，我觉得以我现在的水平代码已经没有什么好调整了，main文件还是有点大，我也已经尽力了。
原本还有点小卡的网站，在启用了Gzip之后，变得一点也不卡了。
修改nginx配置，这里有个小的坑（最后还给我来一个坑），随便找个网站复制下，大致都长下面这样，最后要重启nginx服务，让它读取最新配置nginx -s reload。如果你用的是docker请输入docker exec -it 容器名字 service nginx reload
gzip on;gzip_min_length 5k;gzip_buffers 4 16k; #gzip_http_version 1.0; gzip_comp_level 3; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on;
坑在哪里？你自己看吧，说出来都是泪啊坑
Gzip有啥缺点？ 我也不太清楚，第一应该是它不支持IE6以及IE6以下的浏览器。还有人说他不利于SEO，但也有人说他利于SEO，是真是假去问百度。网上大部分人觉的他的优点大于缺点。
谢谢大家。
评论（
0） © 2014
mamicode.com 版权所有
京ICP备13008772号-2 联系我们:gaon5@hotmail.com 迷上了代码！
