如何优化Vue项目

　　介绍

这篇文章给大家介绍如何优化Vue项目,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

<强> Vue项目完成后就要从开发环境转成生产环境

一些第三方的包体积过大,导致生成js文件过于庞大,这是时候可以生成打包报告来查看项目中的问题

1。生成报告有两种方式,一种使用npm运行构建,报告

2。另一种使vue脚用手架的ui可视化面板,在项目中输入vue ui

如何优化vue项目

3。点击生产环境下的运行按钮,可以看到打包出来的js文件一共有2米之多,js/chunk-vendors。js就是一些项目依赖文件,

再右侧可以看到element-ui和echarts以及富文本编辑器,树状表格插件这几个依赖项的体积最大,接下来可以针对这些做优化

4。复制两份main.js文件命名为main-dev.js和动力。js,分别代表开发环境和生产环境

如何优化Vue项目

通过vue.config。js修改webpack的默认配置,为开发模式与发布模式指定不同的打包入口

module.exports =, { 　　,,lintOnSave:假的, 　　,,chainWebpack: config =祝辞,{ 　　,,,//,,,发布模式 　　,,,config.when (process.env.NODE_ENV ===, & # 39;生产# 39;,,config =祝辞,{ 　　,,,,,config.entry(& # 39;应用# 39;).clear阀门()(& # 39;。/src/main-prod.js& # 39;) 　　,,,}) 　　,,,//,开发模式 　　,,,config.when (process.env.NODE_ENV ===, & # 39;发展# 39;,,config =祝辞,{ 　　,,,,,config.entry(& # 39;应用# 39;).clear阀门()(& # 39;。/src/main-dev.js& # 39;) 　　,,,}) 　　,,} 　　}

5。默认情况下,通过导入语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。

为了解决上述问题,可以通过webpack的外部节点,来配置并加载外部的CDN资源。凡是声明在外部环境中的第三方依赖包,都不会被打包

module.exports =, { 　　,,lintOnSave:假的, 　　,,chainWebpack: config =祝辞,{ 　　,,,//,,,发布模式 　　,,,config.when (process.env.NODE_ENV ===, & # 39;生产# 39;,,config =祝辞,{ 　　,,,,,config.entry(& # 39;应用# 39;).clear阀门()(& # 39;。/src/main-prod.js& # 39;) 　　,,,,,config.set(& # 39;外部# 39;,,{ 　　,,,,,,,vue:, & # 39; vue # 39; 　　,,,,,,,axios:, & # 39; axios& # 39; 　　,,,,,,,lodash:, & # 39; _ # 39; 　　,,,,,,,echarts:, & # 39; echarts& # 39; 　　,,,,,,,nprogress:, & # 39; NProgress& # 39; 　　,,,,,,,& # 39;vue-quill-editor& # 39;:, & # 39; VueQuillEditor& # 39; 　　,,,,,}) 　　,,,,,config.plugin (& # 39; html # 39;) . tap (args =祝辞,{ 　　,,,,,,,arg游戏[0].isProd =,真的 　　,,,,,,,return 参数 　　,,,,,}) 　　,,,}) 　　,,,//,开发模式 　　,,,config.when (process.env.NODE_ENV ===, & # 39;发展# 39;,,config =祝辞,{ 　　,,,,,console.log(配置); 　　,,,,,config.entry(& # 39;应用# 39;).clear阀门()(& # 39;。/src/main-dev.js& # 39;) 　　,,,,,config.plugin (& # 39; html # 39;) . tap (args =祝辞,{ 　　,,,,,,,arg游戏[0].isProd =false 　　,,,,,,,return 参数 　　,,,,,}) 　　,,,}) 　　,,} 　　}

6。同时在公共目录下的指数。html文件中,引入这些第三方依赖包的CDN文件

如何优化Vue项目

打包编译,可以看到重新打包出来的文件从原先的2 m变成了200 k

如何优化Vue项目

7。然后可以对路由进行懒加载,安装@babel/plugin-syntax-dynamic-import依赖

(上一个插件transform-remove-console作用是在生产环境清除全部控制台。日志)

const  prodPlugins =, [] 　　if  (process.env.NODE_ENV ===, & # 39;生产# 39;),{ 　　prodPlugins.push才能(& # 39;transform-remove-console& # 39;) 　　} 　　module.exports =, { 　　预设:,才能 　　,,,& # 39;@vue/cli-plugin-babel预设# 39; 　　,,, 　　插件才能:, 　　,,,( 　　,,,,,& # 39;组件# 39; 　　,,,,,{ 　　,,,,,,,libraryName:, & # 39; element-ui& # 39; 　　,,,,,,,styleLibraryName:, & # 39; theme-chalk& # 39; 　　,,,,,} 　　,,,, 　　,,,…prodPlugins, 　　,,,& # 39;@babel/plugin-syntax-dynamic-import& # 39; 　　,,) 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何优化Vue项目