Vue发布过程中遇到坑,以及webpack打包优化

前言

  • 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以就查阅各种资料和网站,一步一步把代码包优化。这篇文章主要是把我调优的过程记录下来。
  • 项目的基础框架是通过TypeScript官网取得的。各种基础框架模版
  • 项目的构成 vue + ant-design + mysql + TypeScript
  • vue项目地址
  • 最后,关于如何在vue里面实现按需加载,请自行查阅相关资料。以及,webpack的基础知识本文也不做介绍,可以参照我github的 学习笔记
  • [原文地址](http://shenxf.top/2019/05/16/20190516-vueSpeedUp/)

调优过程

  1. 禁用webpack的devtools
  • 打包出来的js文件非常大,每个js文件竟然达到了3~4Mbs,这样的体积对于我的服务带宽来说根本负担不起。打开画面必卡。
  • 究其原因,是因为webpack里面启用了sourceMap,以便于调试。但是这在发布以后就完全没有用了。
  • webpack配置,里面有这句话,把这句话注释掉。原本3~4Mbs的文件,变成了1Mbs文件。压缩了3倍以上。
  • // 启用sourceMap
    devtool: ‘#source-map‘
  1. 抽离css样式等
  • 这个虽然对于改善效果不明显,但是好的分类对于发现问题的本质有很大的帮助。另外,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文件的大小
  1. 启用依赖关系可视化工具
  • 完成上面工作之后,陷入了茫然,网站还是很卡,不知道还能怎么调优,在翻阅了很多网站资料以后,发现了一个依赖关系可视化工具,这对于我来说是一个重大的突破口

    // 依赖关系可视化
    // *************webpack需要引入的包*************************
    const { BundleAnalyzerPlugin } = require(‘webpack-bundle-analyzer‘);
    
    // *************webpack相关配置部分*************************
    module.exports = {
    
        // 启动依赖关系可视化窗口,绑定端口8919
        plugins: [
            new BundleAnalyzerPlugin({ analyzerPort: 8919 }),
        ],
    }

  • 重新进行编译以后的效果图
    JS文件的依赖关系图
  • 通过这个效果图可以很明显的看出js文件里面包含什么依赖,我就是通过这个线索来进行优化的。
  1. 抽离共通部分
  • 为了方便我调查,我把共通的依赖部分都抽离出来了。而这个功能是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
  1. 分析包大小问题
  • 从上面的依赖效果图可以明显的看出,有几个包特别大,特别显眼

    • ant-design的Icons文件
    • moment文件
    • quill文件
    • highlight.js文件
  1. ant-design的Icons文件优化
  • 这是ant-design的一个问题
  • 而关于上面的问题,我建议你们直接看链接最下面的部分。(上面的一群人聊了半天,不知所以然,各种链接来回跳,也没找到结果)
  • 核心的几句话。
    JS解决方案
    TS解决方案
  • 通过了自己的理解,一个要自己引入相应的Icon,另一个是要在webpack里面进行配置
  • 增加antdIcon.ts代码,引入相应的Icon
    // 自己项目里面用到的Icon
    export {
        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
  1. moment文件优化
  • 这是个Ant-design内部依赖的语言文件,我的程序里面本身没有引用,我主要用到的是里面的中文,所以,中文以外的我全部在webpack里面设置忽略就行了

    module.exports = {
        plugins: [
            // 只读取(zh-cn)文件。
            new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(zh-cn)$/),
        ],
    } 
  1. quill文件优化
  • 这个是我用到的富文本功能,本身对这个组件不太了解,但又必须要用到,也没什么太好优化方法,索性,把它抽离成一个单独的共通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
  1. highlight.js文件优化
  • 这个主要是我用markdown编辑器的时候,用来给文字着色的。没有这个,在编写markdown的时候,内容非常的丑陋。
  • 但是这个东西的语法太多了,导致这个包非常的大,我编写的时候,只需要利用其中的几种情况而已,我先随便定几种情况,反正是自己的项目,有不够的以后随时再追加(正式项目的话请做好调研)
  • highlight.js官方说明
    // 按需加载的写法
    import hljs from ‘highlight.js/lib/highlight‘;
    import javascript from ‘highlight.js/lib/languages/javascript‘;
    hljs.registerLanguage(‘javascript‘, javascript);
  • 改完文件以后再看依赖关系
    依赖关系效果图5
  • JS文件大小
    JS文件大小5
  • 至此,我觉得以我现在的水平代码已经没有什么好调整了,main文件还是有点大,我也已经尽力了。
  1. 服务开启Gzip代码压缩
  • 我用的是nginx服务器,它可以开启Gzip,代码压缩率非常可观。200k文件直接被它压缩到几十k。
  • 原本还有点小卡的网站,在启用了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,是真是假去问百度。网上大部分人觉的他的优点大于缺点。
  • 谢谢大家。

原文地址:https://www.cnblogs.com/bigmango/p/12356260.html

时间: 2024-10-07 11:42:45

Vue发布过程中遇到坑,以及webpack打包优化的相关文章

Torch-RNN运行过程中的坑 [2](Lua的string sub函数,读取中文失败,乱码?)

0.踩坑背景 仍然是torch-rnn/LanguageModel.lua文件中的一些问题,仍然是这个狗血的LM:encode_string函数: function LM:encode_string(s) local encoded = torch.LongTensor(#s) for i = 1, #s do local token = s:sub(i, i) local idx = self.token_to_idx[token] assert(idx ~= nil, 'Got invali

Torch-RNN运行过程中的坑 [1](读取Lua非空table,size为0)

0.踩坑背景 执行Torch-RNN的时候,在LanguageModel.lua中的encode_string函数中,对start_text的各个character进行id映射编码,实现功能类似"北京天安门"-->"5 10 88 32 111",方便后面的计算. 这个函数会利用一个全局的类似HashMap的table,hashmap中的key是character(char),value是id(int),涉及到一个从hashmap中按照key取值的操作,代码如

[转] Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

Vue实践过程中的几个问题

前言 本篇是我在使用vue过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家. 本篇记录个人遇到的问题如下: 路由变化页面数据不刷新问题 setTimeout/setInterval this指向改变,无法用this访问VUe实例 setInterval路由跳转继续运行并没有销毁 vue 滚动行为(浏览器回退记忆位置)用法 vue路由拦截浏览器后退实现草稿保存类似需求 v-once 只渲染元素和组件一次,优化更新

菜鸟帮你跳过openstack配置过程中的坑

一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间一定比老鸟们久.所以现在总结一下openstack在配置过程中的几大坑点,让各位在配置过程中不再问天问大地,灵魂一片片凋落. 1. 如果是新手一定要学会用快照,一定要多用快照,从镜像安装完成开始,最好每一个章节模块配置完成后都用上一个快照,人生苦短,快照帮你性感. 2.一定要仔细看配种配置以及环境要

【vue】饿了么项目-使用webpack打包项目

1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的"node build/build.js"脚本 build完成后显示 进入项目文件夹,找到dist文件夹,这些是打包后产生的文件 2.webpack打包过程中会将css和js文件单独提取出来,且会根据path存放进相应的文件夹下,形成如上图的根目录,文件名是根据内容产生的哈希值,文件内容改变

基于CommonsChunkPlugin,webpack打包优化

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.但是打包的文件还是很大,特别是通过CommonsChunkPlugin的async:true打包的chunk的公共包不可控.今天就通过CommonsChunkPlugin插件的理解,来优化这个问题 问题描述详细些,我们的打包是基于router进行的chunk分割,比如router有10个,router1,router2用到了ec

webpack打包优化并开启gzip

应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置: 问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)? 优化一:一看js这么大肯定是没有关闭source-map,先将webpack配置文件中dev-tool:false, 优化二:使用compresion-webpack-plugin插件将静态资源压缩,并生成.gz文件,配置如下: 具体用法请参照:http://www.css88.com/doc/w