怎么提速优化vue-cli的代码
这次给大家带来怎么提速优化vue-cli的代码,提速优化vue-cli代码的注意事项有哪些,下面就是实战案例,一起来看一下。
前言
伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情
在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老就是不严谨
本文希望能在耗时优化与构建性能提升之间做一个平衡,即花最少的时间,对官方模板做最少的修改下,赚取最大的构建性能提升
思路
早期版本的vue-cli和webpack2时代,网上流传以下优化配置,但其实新版本的vue-cli和webpack3已经不需要
使用ParallelUglifyPlugin替换UglifyPlugin(新版本的UglifyPlugin已经支持且默认开启了多线程并行构建,所以此步骤没有必要)
- 启用webpack3的Scope Hoisting(vue-cli新版本已经配置webapck3,且已经默认开启此配置)
- 善用alias(新版本vue-cli已经进行此项工作)
- 配置CommonsChunkPlugin提取公用代码(新版本vue-cli已经进行此项工作)
对于新版本的vue-cli和webpack3,以下简单配置优化后可提升最少2倍的构建速度
按需引用
- 启用happypack多核构建项目
- 修改source-map配置
- 启用DllPlugin和DllReferencePlugin预编译库文件
实践
1、按需引用
1.1几乎所有的第三方组件框架都会提供组件的 按需引用 方式,以iview为例,通过借助插件babel-plugin-import 可以实现按需加载组件,减少文件体积,只需要修改 .babelrc 文件
npm install babel-plugin-import --save-dev // .babelrc { "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]] }
1.2然后这样按需引入组件,就可以减小体积了
import { Button } from 'iview' Vue.component('Table', Table)
2、启用happypack多核构建项目
安装happypack后,修改 /build/webpack.base.conf.js 文件即可
npm install happypack --save-dev // /build/webpack.base.conf.js const HappyPack = require('happypack') const os = require('os') const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }) // 增加HappyPack插件 plugins: [ new HappyPack({ id: 'happy-babel-js', loaders: ['babel-loader?cacheDirectory=true'], threadPool: happyThreadPool, }) ] // 修改引入loader { test: /\.js$/, // loader: 'babel-loader', loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader include: [resolve('src'), resolve('test')] }
3、修改source-map配置
3.1首先修改 /config/index.js 文件
// /config/index.js dev环境:devtool: 'eval'(最快速度) prod环境:productionSourceMap: false(关闭source-map)
3.2然后修改 /src/main.js 文件,关闭生产环境的调试信息
// /src/main.js const isDebug_mode = process.env.NODE_ENV !== 'production' Vue.config.debug = isDebug_mode Vue.config.devtools = isDebug_mode Vue.config.productionTip = isDebug_mode
4、启用DllPlugin和DllReferencePlugin预编译库文件
这是最复杂也是提升效果最明显的一步,原理是将第三方库文件单独编译打包一次,以后的构建都不需要再编译打包第三方库
4.1 增加 build/webpack.dll.config.js 文件,并在其中配置需要单独DLL化的模块
const path = require("path") const webpack = require("webpack") module.exports = { // 你想要打包的模块的数组 entry: { vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview'] }, output: { path: path.join(dirname, '../static/js'), // 打包后文件输出的位置 filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.join(dirname, '.', '[name]-manifest.json'), name: '[name]_library', context: dirname }), // 压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }
4.2 在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下插件
new webpack.DllReferencePlugin({ context: dirname, manifest: require('./vendor-manifest.json') })
4.3 在 /package.json 增加命令
"dll": "webpack --config ./build/webpack.dll.config.js"
4.4 在 /index.html 增加DLL化JS引入(必须首先引入)
<script src="/static/js/vendor.dll.js"></script>
4.5 执行构建
npm run dll(这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js) npm run dev 或 npm run build
后记
以上四个大步骤完成后,我们就完成了对vue-cli模板工程构建优化提升,虽然看起来依然算不上简单,但是这已经是最最最简单的优化了,还有更多奇技淫巧没有展开,因为我觉得过多的优化配置意义不大,反而会给项目工程带来太多冗余和复杂化
以上的配置实际测试的构建效果是从原先的13秒减少到了6秒左右,热部署更是毫秒级的
最重要的是,最简单化的配置,在未来vue-cli和webpack升级新版本后,也可以很容易的重新配置进去使用,熟练配置一次后,重新再还原配置只需要 5分钟左右 想想花5分钟修改一下配置,就能换来每次构建2倍以上速度的提升,是不是会有点小激动呢:)
这里再多说些后话吧,其实webpack2至webpack3的升级,个人觉得蛮失望的,因为它还是没有从根本上解决其配置过于复杂的问题,作为目标是占领全世界所有web项目构建的产品,它应该更多地从易用性/人性化的角度去考虑
每一次看着webpack的工程里面的各种.babelrc,.postcssrc.js...还有各种的.conf文件,甚至还有各种的main,index,app文件,就忍不住想吐槽,究竟为什么前端的构建会发展成这样,一个好好的项目工程里,十几种配置文件,真的有必要吗?我原本以为webpack3会将这一切变得简单,然而它并没有,不过既然暂时没有办法去改变,那我们能做的就是,尽可能理解其中原理,尽自己最大的可能去简化/优化
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是怎么提速优化vue-cli的代码的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

Golang的垃圾回收(GC)一直是开发者们关注的一个热门话题。Golang作为一门快速的编程语言,其自带的垃圾回收器能够很好地管理内存,但随着程序规模的增大,有时候会出现一些性能问题。本文将探讨Golang的GC优化策略,并提供一些具体的代码示例。Golang中的垃圾回收Golang的垃圾回收器采用的是基于并发标记-清除(concurrentmark-s

Laravel是一款广受欢迎的PHP开发框架,但有时候被人诟病的就是其速度慢如蜗牛。究竟是什么原因导致了Laravel的速度不尽如人意呢?本文将从多个方面深度解读Laravel速度慢如蜗牛的原因,并结合具体的代码示例,帮助读者更深入地了解此问题。1.ORM查询性能问题在Laravel中,ORM(对象关系映射)是一个非常强大的功能,可以让

在Linux操作系统中处理文件需要使用各种命令和技术,使开发人员能够高效地创建和执行文件、代码、程序、脚本和其他东西。在Linux环境中,扩展名为”.a”的文件作为静态库具有重要的重要性。这些库在软件开发中发挥着重要作用,允许开发人员有效地管理和共享多个程序的公共功能。对于Linux环境中的有效软件开发,了解如何创建和运行“.a”文件至关重要。本文将介绍如何全面安装和配置Linux“.a”文件,让我们一起探索Linux“.a”文件的定义、用途、结构,以及创建和执行它的方法。什么是L

时间复杂度衡量算法执行时间与输入规模的关系。降低C++程序时间复杂度的技巧包括:选择合适的容器(如vector、list)以优化数据存储和管理。利用高效算法(如快速排序)以减少计算时间。消除多重运算以减少重复计算。利用条件分支以避免不必要的计算。通过使用更快的算法(如二分搜索)来优化线性搜索。

解码Laravel性能瓶颈:优化技巧全面揭秘!Laravel作为一款流行的PHP框架,为开发者提供了丰富的功能和便捷的开发体验。然而,随着项目规模增大和访问量增加,我们可能会面临性能瓶颈的挑战。本文将深入探讨Laravel性能优化的技巧,帮助开发者发现并解决潜在的性能问题。一、数据库查询优化使用Eloquent延迟加载在使用Eloquent查询数据库时,避免

自2023年3月14日开始,ChatGLM-6B以来,GLM系列模型受到了广泛的关注和认可。特别是在ChatGLM3-6B开源之后,开发者对智谱AI推出的第四代模型充满了期待。而这一期待,随着GLM-4-9B的发布,终于得到了充分的满足。GLM-4-9B的诞生为了赋予小模型(10B及以下)更加强大的能力,GLM技术团队经过近半年的探索,推出了这一全新的第四代GLM系列开源模型:GLM-4-9B。这一模型在保证精度的同时,大幅度压缩了模型大小,具有更快的推理速度和更高的效率。GLM技术团队的探索没

大模型颠覆一切,终于还是颠到了本小编头上。还是一个一句话就被打造出来的Agent。像这样,抛给Ta一篇文章,不到1秒,标题建议就新鲜出炉了。这效率,比起本人类,只能说是一个快如闪电一个慢如树懒吧…更难顶的是,创造这个Agent,真的就是几分钟的事。Prompt是酱婶的:并且,如果你也想体验这种颠覆一切的feel,现在,基于这个百度刚刚上新的文心智能体平台,人人都能免费打造属于自己的智能助手。可以利用搜索引擎、智能硬件平台、语音识别、地图、汽车等百度移动生态渠道,让更多人使用上你的创意!李彦宏本人

Laravel性能瓶颈揭秘:优化方案大揭秘!随着互联网技术的发展,网站和应用程序的性能优化变得愈发重要。作为一款流行的PHP框架,Laravel在开发过程中可能会面临性能瓶颈。本文将探讨Laravel应用程序可能遇到的性能问题,并提供一些优化方案和具体的代码示例,让开发者能够更好地解决这些问题。一、数据库查询优化数据库查询是Web应用中常见的性能瓶颈之一。在
