首页 web前端 js教程 怎么提速优化vue-cli的代码

怎么提速优化vue-cli的代码

Apr 13, 2018 pm 03:49 PM
vue-cli 代码 优化

这次给大家带来怎么提速优化vue-cli的代码,提速优化vue-cli代码的注意事项有哪些,下面就是实战案例,一起来看一下。

前言

伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情

在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老就是不严谨

本文希望能在耗时优化与构建性能提升之间做一个平衡,即花最少的时间,对官方模板做最少的修改下,赚取最大的构建性能提升

思路

早期版本的vue-cli和webpack2时代,网上流传以下优化配置,但其实新版本的vue-cli和webpack3已经不需要

  1. 使用ParallelUglifyPlugin替换UglifyPlugin(新版本的UglifyPlugin已经支持且默认开启了多线程并行构建,所以此步骤没有必要)

  2. 启用webpack3的Scope Hoisting(vue-cli新版本已经配置webapck3,且已经默认开启此配置)

  3. 善用alias(新版本vue-cli已经进行此项工作)

  4. 配置CommonsChunkPlugin提取公用代码(新版本vue-cli已经进行此项工作)

对于新版本的vue-cli和webpack3,以下简单配置优化后可提升最少2倍的构建速度

  1. 按需引用

  2. 启用happypack多核构建项目

  3. 修改source-map配置

  4. 启用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中文网其它相关文章!

推荐阅读:

HTML+JS实现滚动数字的时钟

VueRouter的导航守卫应该怎么使用

vue+element实现表格分页的步奏详解                        

以上是怎么提速优化vue-cli的代码的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Golang的gc优化策略探讨 Golang的gc优化策略探讨 Mar 06, 2024 pm 02:39 PM

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

深度解读:为何Laravel速度慢如蜗牛? 深度解读:为何Laravel速度慢如蜗牛? Mar 07, 2024 am 09:54 AM

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

创建和运行Linux'.a”文件 创建和运行Linux'.a”文件 Mar 20, 2024 pm 04:46 PM

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

C++ 程序优化:时间复杂度降低技巧 C++ 程序优化:时间复杂度降低技巧 Jun 01, 2024 am 11:19 AM

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

解码Laravel性能瓶颈:优化技巧全面揭秘! 解码Laravel性能瓶颈:优化技巧全面揭秘! Mar 06, 2024 pm 02:33 PM

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

清华大学与智谱AI重磅开源 GLM-4:掀起自然语言处理新革命 清华大学与智谱AI重磅开源 GLM-4:掀起自然语言处理新革命 Jun 12, 2024 pm 08:38 PM

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

一句话打造Agent!李彦宏:人人都是开发者的时代到来 一句话打造Agent!李彦宏:人人都是开发者的时代到来 Apr 17, 2024 pm 02:28 PM

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

Laravel性能瓶颈揭秘:优化方案大揭秘! Laravel性能瓶颈揭秘:优化方案大揭秘! Mar 07, 2024 pm 01:30 PM

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

See all articles