一.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打包后自动压缩代码的更多相关文章

  1. vue -- vue-cli webpack项目打包后自动压缩成zip文件

    用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...

  2. Vue.js中用webpack合并打包多个组件并实现按需加载

    对于现在前端插件的频繁更新,所以多多少少要对组件化有点了解,下面这篇文章主要给大家介绍了在Vue.js中用webpack合并打包多个组件并实现按需加载的相关资料,需要的朋友可以参考下.   前言 随着 ...

  3. Vue.js 入门 --- vue.js 安装

    本博文转载  https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...

  4. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  5. js弹框3秒后自动消失

    开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法 ...

  6. Xcode: Run Script 的运用, 使build打包后自动+1

    背景: 每次打包都要build+1处理,比较麻烦,使用 Run Script 的运用使build打包后自动+1 0. 使用xcode 添加run Script 然后就可以添加Run Script了 1 ...

  7. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  8. vue.js 解决空格报错!!!

    当我们初入vue.js的时候.使用cli脚手架快速创建项目的时候: 如果语法格式错误(这里主要指的是:空格多少引起的问题)!! 找到  webpack.base.config.js文件注释掉下面的东西 ...

  9. 前端(以Vue为例)webpack打包后dist文件包如何部署到django后台中

    由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢? 1.打包后文件包dist 进入到 di ...

随机推荐

  1. u3d加载加密和未加密

    using UnityEngine; using System.Collections; public class loadnew : MonoBehaviour { public bool IsCo ...

  2. [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序

    af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...

  3. fdisk mkfs blkid fstab

    fdisk -l  查看系统分区信息 mkfs  制作文件系统mke2fs 制作ext型文件系统mkntfs  制作ntfs型文件系统 e2label  更改ext型文件系统卷标ntfslabel 更 ...

  4. selenium 单浏览器模式

    如果需要无限制的任意实例化,而不是把实例化后的对象传给另一个函数.方法处理.就需要控制单浏览器,不然每次实例化弹出来一个新浏览器,很占内存 #coding=utf8 from selenium.web ...

  5. MyBatis踩坑记录

    在线文档: 动态SQL  http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html 1. Error setting null for paramete ...

  6. Java计算几何图形的面积

    对于每个几何图形而言,都有一些共同的属性,如名字.面积等,而其计算面积的方法却各不相同.为了简化开发,请编写程序,定义一个超类来实现输入名字的方法,并使用抽象方法来计算面积. 思路分析: 所谓超类就是 ...

  7. java之 ------ 可变參数和卫条件

    可变參数:适用于參数个数不确定.类型确定的情况,java把可变參数当做数组处理. 可变參数必须位于最后一项.当可变參数个数多于一个时,必将有一个不是最后一项,所以仅仅支持有一个可变參数. 可变參数的书 ...

  8. css后台页面布局技巧

    目标: 实现左边侧边栏固定,右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动,且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条,较多时可以滚动 code: < ...

  9. ios开发之--使用UILabel Category 计算UILabel内容大小

    在此仅做记录,代码如下:

  10. O2O(online to offline)营销模式

    O2O营销模式又称离线商务模式,是指线上营销线上购买带动线下经营和线下消费.O2O通过打折.提供信息.服务预订等方式,把线下商店的消息推送给互联网用户,从而将他们转换为自己的线下客户,这就特别适合必须 ...