---恢复内容开始---

  从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供一下方便。

  一开始项目部署到线上后第一次访问首页的时间是7、8秒的样子,页面加载太慢了自己都接受不了何况用户。

  主要是从一下几步来优化的:

  1、vue路由的加载方式

import Home from '@/components/Index'

改为

const Index = resolve => require(['@/components/Index'], resolve)

  上面那种普通的加载方式的缺点是把所有的路由打包在一个js文件里面页面多的话这个文件会非常大加载的很慢。

  下面这种方式是按需加载在访问的时候只加载相关的路由,又被叫做(懒加载)

  2、第三方依赖包的引入

    main.js

import Vue from 'vue'
import router from './router'
import Element from 'element-ui'
import echarts from 'echarts' Vue.use(Element)
Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    这样引入依赖包会把所依赖的第三方包全都打包起来从而造成打包后的 app.js和vendor.js文件过大加载的很慢,把这种方式改为CDN引入。

    首先把main.js种引入的第三方包注释掉,vue不用注释

import Vue from 'vue'
//import router from './router'
//import Element from 'element-ui'
//import echarts from 'echarts' //Vue.use(Element)
//Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    在webpack.base.conf.js中增加以下设置,这样就不会把依赖包打包到自己的项目里面了

module.exports = {

  externals: {
'vue': 'Vue',
'element-ui': 'ElementUI',
'echarts': 'echarts',
} }

    然后在index.html中用CDN的方式引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.11.0/theme-chalk/index.css">
  <title></title>
</head>
<body>
<div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.11.0/index.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</body>
</html>

    这样在打包的时候就不会把这些依赖包打包到里面,vendor.js有之前的2M多变成了200多K。

  3、打包生成压缩包,同时不生成.amp文件

    先安装 npm install --save-dev compression-webpack-plugin

    找到config/index.js 修改productionSourceMap: false,默认是true修改为false这样打包的时候就不会生成.map文件

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', /**
* Source Maps
*/ productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

    打包生成压缩包修改  productionGzip:true 默认是false 修改为true,修改完成后设置webpack.prod.conf.js, 这个设置在vue-lic 2.0以上版本中默认就已经设置好了,所以就不用

  手动设置。

if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}

  npm run build 有可能会报错

ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties

  这个错误是compression-webpack-plugin的版本的问题,我安装的版本是 @1.0.0 可以成功打包

  打包生成压缩包部署到线上需要后台的配合设置 nginx 开启:gzip

    设置完以上及步骤后现在的速度保持在1s左右,打包后的js文件也变得很小了。

    以上是我对项目速度优化的全部步骤希望对有需要的小伙伴们有所帮助!!

---恢复内容结束---

  从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供一下方便。

  一开始项目部署到线上后第一次访问首页的时间是7、8秒的样子,页面加载太慢了自己都接受不了何况用户。

  主要是从一下几步来优化的:

  1、vue路由的加载方式

import Home from '@/components/Index'

改为

const Index = resolve => require(['@/components/Index'], resolve)

  上面那种普通的加载方式的缺点是把所有的路由打包在一个js文件里面页面多的话这个文件会非常大加载的很慢。

  下面这种方式是按需加载在访问的时候只加载相关的路由,又被叫做(懒加载)

  2、第三方依赖包的引入

    main.js

import Vue from 'vue'
import router from './router'
import Element from 'element-ui'
import echarts from 'echarts' Vue.use(Element)
Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    这样引入依赖包会把所依赖的第三方包全都打包起来从而造成打包后的 app.js和vendor.js文件过大加载的很慢,把这种方式改为CDN引入。

    首先把main.js种引入的第三方包注释掉,vue不用注释

import Vue from 'vue'
//import router from './router'
//import Element from 'element-ui'
//import echarts from 'echarts' //Vue.use(Element)
//Vue.prototype.echarts = echarts new Vue({
el: '#app',
store,
router,
components: {App},
template: '<App/>'
})

    在index.html中用CDN的方式引入

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.11.0/theme-chalk/index.css">
  <title></title>
</head>
<body>
<div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.11.0/index.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
</body>
</html>

    这样在打包的时候就不会把这些依赖包打包到里面,vendor.js有之前的2M多变成了200多K。

  3、打包生成压缩包,同时不生成.amp文件

    先安装 npm install --save-dev compression-webpack-plugin

    找到config/index.js 修改productionSourceMap: false,默认是true修改为false这样打包的时候就不会生成.map文件

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/', /**
* Source Maps
*/ productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map', // Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}

    打包生成压缩包修改  productionGzip:true 默认是false 修改为true,修改完成后设置webpack.prod.conf.js, 这个设置在vue-lic 2.0以上版本中默认就已经设置好了,所以就不用

  手动设置。

if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin') webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}

  npm run build 有可能会报错

ValidationError: Compression Plugin Invalid Options
options should NOT have additional properties

  这个错误是compression-webpack-plugin的版本的问题,我安装的版本是 @1.0.0 可以成功打包

  打包生成压缩包部署到线上需要后台的配合设置 nginx 开启:gzip

    设置完以上及步骤后现在的速度保持在1s左右,打包后的js文件也变得很小了。

    以上是我对项目速度优化的全部步骤希望对有需要的小伙伴们有所帮助!!

vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大的更多相关文章

  1. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  2. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  3. vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1

    1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...

  4. webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  5. mac下搭建基于vue-cli 3.0的Element UI 项目

    1.安装yarn管理工具(包含node.js); 2.安装全局vue-cli全家桶: yarn global add @vue/cli 3.创建.测试一个vue-cli项目: vue create a ...

  6. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  7. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  8. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  9. Vue结合Element UI实战

    创建工程 1. 创建一个名为hello-vue的工程 vue init webpack hello-vue 2. 安装依赖 需要安装 vue-router.element-ui.sass-loader ...

随机推荐

  1. Python压缩

    ru=lambda x:x.decode('u8') rp=lambda x:x.replace('\\','/') gb=lambda x:x.decode('gbk') class ZIP: de ...

  2. springboot系列之-log

    配置文件以application.yml为例说明: Spring Boot默认的日志组件为Logback. 一. 日志配置参数: logging: file: #日志文件,绝对路径或相对路径 path ...

  3. Vs2010中rdlc报表绑定DataTable数据源

    首先,新建一个网站,接着添加数据集,并且命名为student,如下图所示: 在该数据集对象上面添加datatable,并且设置列名,如下图所示: 添加一张报表,命名为student,如下图所示: 向报 ...

  4. 一个解析RTSP 的URL函数

    写了一个解析URL的函数,可以提取URL中的IP 和 port. 如:url = "rtsp://192.168.1.43:2554/realmp3.mp3"; url = &qu ...

  5. bzoj 2741

    题目描述:这里 一道非常好的题 由于强制在线,我们必须要用一些数据结构来处理 考虑分块:将整个序列分块,块内部分预处理,块外部分暴力处理 对于每个块,计算出以这个块的左端点为端点,向右枚举这个块以后的 ...

  6. 思路 一般创建展示类时候 例如page类 会在网页上新增多个对应字段的隐藏域 用于存储值

    思路 一般创建展示类时候 例如page类 会在网页上新增多个对应字段的隐藏域 用于存储值

  7. Vuejs——(12)组件——动态组件

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  8. Python 生成器, 迭代器, 可迭代对象的区别

    1.可迭代对象 在python中, 一切皆对象, 但凡是可以用for循环进行遍历取值的对象都可以称之为可迭代对象, 可迭代对象在程序的一个执行周期中,可以无限轮次的进行循环遍历 2.迭代器 a.一个可 ...

  9. Selenium2+python自动化65-js定位几种方法总结【转载】

    前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一.以下总结了5种js定位的方法 除了id是定位到的是单个element元素对象,其它的都是elements返 ...

  10. DOS程序员手册(六)

    217页 程序的主要部分后面是主程序所使用的许多小的扩充内存功能.将这些功能组合起 来这些功能便覆盖了扩充内存的操作,尽管还可能想向它们添加错误检查. 程序所包含的函数有: emmtest   检验内 ...