vue-cli 下的 webpack 优化
app bundle 可以通过组件懒加载优化
vender 优化方法:
- 使用 cdn,然后在 webpack 配置中指定 externals。
- 利用 webpack 的插件 DllPlugin 和 DllReferencePlugin,把这些不常变动的第三方库都提取出来。
- 问:vender 包怎样优化?
答:一种方法:使用 cdn,然后在 webpack 配置中指定 externals。
打包 vender 时不打包 vue、vuex、vue-router、axios 等,换用国内的 bootcdn 直接引入到根目录的 index.html 中。
在 webpack 里有个 externals,可以忽略不需要打包的库
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
此时的 vender 包会非常小,如果不够小还可以拆分其他的库,此时增加了请求的数量,但是远比加载一个 1.4M 的 bundle 快的多。
问题: 在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间。
解决:利用 webpack 的插件 DllPlugin 和 DllReferencePlugin,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间。
DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件,这个 json 文件中会映射每个打包的模块地址和 id,DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。
参考链接:http://www.html-js.com/article/4093
vue-cli 下的 webpack 优化的更多相关文章
- vue cli 3 & webpack-merge & webpack 3 & bug
vue cli 3 & webpack-merge & webpack & bug bug webpack-merge & bug webpack-merge ??? ...
- vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑
1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- @vue/cli 3.x项目脚手架 webpack 配置
@vue/cli 是一个基于 Vue.js 进行快速开发的完整系统. @vue/cli 基于node服务 需要8.9以上版本 可以使用 nvm等工具来控制node版本 构建于 webpack ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- 【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
随机推荐
- 网络SSID是什么意思
ssid是网络的ID(名称).一般用在无线网络上.搜索无线网络名一般就是在搜索无线网络的ssid. SSID是Service Set Identifier的缩写,意思是:服务集标识.SSID技术可以将 ...
- eclipse编译zookeeper源码
使用版本zookeeper-3.4.6.jar 从官网下载zookeeper-3.4.6.tar.gz,解压缩到 D:\tools 文件夹,目录结构如下图. 1. Eclipse新建java工程: 2 ...
- Intel DAAL AI加速——支持从数据预处理到模型预测,数据源必须使用DAAL的底层封装库
数据源加速见官方文档(必须使用DAAL自己的库): Data Management Numeric Tables Tensors Data Sources Data Dictionaries Data ...
- JavaScript学习总结(六)——JavaScript判断数据类型总结
最近做项目中遇到了一些关于javascript数据类型的判断处理,上网找了一下资料,并且亲自验证了各种数据类型的判断,在此做一个总结吧! 一.JS中的数据类型 1.数值型(Number):包括整数.浮 ...
- codeforce 853A Planning
题目地址:http://codeforces.com/problemset/problem/853/A 题目大意: 本来安排了 n 架飞机,每架飞机有 ci 的重要度, 第 i 架飞机的起飞时间为 i ...
- python3 win10_x64 安装pcapy
稀里糊涂就装上了 大概记录一下都有什么. visual studio build tools 2015 下载地址: http://landinghub.visualstudio.com/visual- ...
- ora-01830:日期格式图片在转换整个输入字符串之前结束
在to_date的时候因为 fldsj这个字段的大小 与 ‘yyyy-MM-dd’不符合 所以需要截取下fldsj字段的大小 to_char(to_date(substr(fldsj,1,10),' ...
- Beta 冲刺(7/7)
前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10129067.html 作业博客:https://edu.cnblogs.com/campus ...
- java poi 写入大量数据到excel中
最近在利用poi往excel中写入大量数据时,发现excel2003最多只支持65535条,大量数据时容易造成oom,上网查了一下api,发现目前对于2003,每个sheet最多支持65535条,若数 ...
- Apache Tomcat/6.0.39如何配置连接mysql,JDBC:mysql-connector-java-5.1.30-bin.jar-成功连接心得
http://tomcat.apache.org/tomcat-6.0-doc/jndi-datasource-examples-howto.html 前提:开启TOMCAT,MYsql MySQL ...