vue.js - 解决vue-cli打包后自动压缩代码
一.webpack中引入的压缩代码
/build/webpack.prod.conf.js
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
压缩js 的插件叫 uglifyjs-webpack-plugin,
压缩css 的插件叫 optimize-css-assets-webpack-plugin
二.OptimizeCSSPlugin 和 UglifyJsPlugin 这两个关键词所在的地方
1.css 压缩代码
// css 压缩代码,将下面代码注释掉
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
2.压缩js代码
// 压缩js代码,将下面代码注释掉
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
3.html代码, 将 minify里布尔值改成false
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: false,
collapseWhitespace: false,
removeAttributeQuotes: false
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
vue.js - 解决vue-cli打包后自动压缩代码的更多相关文章
- vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
- Vue.js中用webpack合并打包多个组件并实现按需加载
对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下. 前言 随着 ...
- Vue.js 入门 --- vue.js 安装
本博文转载 https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- js弹框3秒后自动消失
开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...
- Xcode: Run Script 的运用, 使build打包后自动+1
背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...
- js 引入Vue.js实现vue效果
拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...
- vue.js 解决空格报错!!!
当我们初入vue.js的时候.使用cli脚手架快速创建项目的时候: 如果语法格式错误(这里主要指的是:空格多少引起的问题)!! 找到 webpack.base.config.js文件注释掉下面的东西 ...
- 前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中
由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢? 1.打包后文件包dist 进入到 di ...
随机推荐
- layui框架遇到时间控件在搜索之后再次点击出现异常的问题
原因:使用jquery赋值html代码问题 解决方法:使用js代码处理即可,如: document.getElementsByTagName('tbody')[0].innerHTML = 自己的ht ...
- linux下redis的安装和集群搭建
一.redis概述 1.1.目前redis支持的cluster特性: 1):节点自动发现. 2):slave->master 选举,集群容错. 3):Hot resharding:在线分片. 4 ...
- memcached注意事项与应用范围、应用条件、限制
一.服务器内存为4GB,却仅分配量3GB,因为内存分配量超过这个值,可能导致内存交换(swap). memcached启动时 指定的内存分配量是memcached用于保存数据的内存大小,没有包括&qu ...
- 基于PHP采集数据入库程序(一)
前几天有一朋友要我帮做一个采集新闻信息的程序,抽了点时间写了个PHP版本的,随笔记录下. 说到采集,无非就是远程获取信息->提取所需内容->分类存储->读取->展示 也算是简单 ...
- symfony分页实现方法
1.symfony分页是要用到组件的,所以这里使用KnpPaginatorBundle实现翻页 2. 用composer下载 在命令行中: composer require "knplab ...
- javascript提取联通个人信息和通话记录的代码
由于一些巨大的困难,一些后端爬虫改成了前端爬虫. 前端爬虫是只有js语言,后端爬虫有python java nodejs php这些语言. 前端爬虫有window.document对象,在浏览器端的爬 ...
- ios利用Reachability确认网络环境3G/WIFI(转)
iPhone开发技巧之网络篇(4)--- 确认网络环境 开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会通过Apple的审查的. Apple 的 例程 Re ...
- 虚拟机安装linux系统无法上网的解决方法
原文:https://www.jb51.net/article/118267.htm 周末闲来无事,用虚拟机安装了centos6.5系统,安装成功后发现不能连接网络,然后我就一脸蒙蔽了,无奈之下,只能 ...
- swift--CATransform3D的简单介绍
今天来了解下CATransform3D的一些基本的知识.CATransform3D是一个用于处理3D形变的类,其可以改变控件的平移.缩放.旋转.斜交等,其坐标系统采用的是三维坐标系,即向右为x轴正方向 ...
- backbone学习笔记:集合(Collection)
集合(Collection)是一个Backbone对象,用来组织和管理多个模型,它不仅仅是一个javascript数组,还提供了专门的方法来对集合进行排序.过滤和遍历,集合可以方便的与REST服务器进 ...