一.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. layui框架遇到时间控件在搜索之后再次点击出现异常的问题

    原因:使用jquery赋值html代码问题 解决方法:使用js代码处理即可,如: document.getElementsByTagName('tbody')[0].innerHTML = 自己的ht ...

  2. linux下redis的安装和集群搭建

    一.redis概述 1.1.目前redis支持的cluster特性: 1):节点自动发现. 2):slave->master 选举,集群容错. 3):Hot resharding:在线分片. 4 ...

  3. memcached注意事项与应用范围、应用条件、限制

    一.服务器内存为4GB,却仅分配量3GB,因为内存分配量超过这个值,可能导致内存交换(swap). memcached启动时 指定的内存分配量是memcached用于保存数据的内存大小,没有包括&qu ...

  4. 基于PHP采集数据入库程序(一)

    前几天有一朋友要我帮做一个采集新闻信息的程序,抽了点时间写了个PHP版本的,随笔记录下. 说到采集,无非就是远程获取信息->提取所需内容->分类存储->读取->展示 也算是简单 ...

  5. symfony分页实现方法

    1.symfony分页是要用到组件的,所以这里使用KnpPaginatorBundle实现翻页 2. 用composer下载 在命令行中:  composer require "knplab ...

  6. javascript提取联通个人信息和通话记录的代码

    由于一些巨大的困难,一些后端爬虫改成了前端爬虫. 前端爬虫是只有js语言,后端爬虫有python java nodejs php这些语言. 前端爬虫有window.document对象,在浏览器端的爬 ...

  7. ios利用Reachability确认网络环境3G/WIFI(转)

    iPhone开发技巧之网络篇(4)--- 确认网络环境  开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会通过Apple的审查的. Apple 的 例程 Re ...

  8. 虚拟机安装linux系统无法上网的解决方法

    原文:https://www.jb51.net/article/118267.htm 周末闲来无事,用虚拟机安装了centos6.5系统,安装成功后发现不能连接网络,然后我就一脸蒙蔽了,无奈之下,只能 ...

  9. swift--CATransform3D的简单介绍

    今天来了解下CATransform3D的一些基本的知识.CATransform3D是一个用于处理3D形变的类,其可以改变控件的平移.缩放.旋转.斜交等,其坐标系统采用的是三维坐标系,即向右为x轴正方向 ...

  10. backbone学习笔记:集合(Collection)

    集合(Collection)是一个Backbone对象,用来组织和管理多个模型,它不仅仅是一个javascript数组,还提供了专门的方法来对集合进行排序.过滤和遍历,集合可以方便的与REST服务器进 ...