您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

如何解决webpack打包文件过大的问题

时间:2019-09-10 10:48:29  来源:  作者:

vue-cli全家套相信很多人都用过,但可能很多人不太清楚webpack为解决打包文件过大做了哪些事情,今天我们就主要来聊聊这个。

如何解决webpack打包文件过大的问题

 

首先配置全局变量

首先,通过指定环境,告诉webpack我们当前处于production环境中,要按照production的方式去打包。

 //指定环境,将process.env.NODE_ENV环境与library关联
 new Webpack.DefinePlugin({
	'process.env.NODE_ENV': JSON.stringify('production'),
 })

优化devtool中的source-map.

dev-tool提供了很多种选项,用来增强我们debug的能力,我们熟知的有:source-map,inline-source-map,cheap-source-map等等。详细的用法可以参考 Devtool官方文档(https://webpack.github.io/docs/configuration.html#devtool )。如果你的文件在打包之后突然变成好几M,那么不用想,肯定是因为source-map的原因。source-map在开发阶段确实很好用,调试起来很方便,但是在生产环境下就没必要部署了。 建议在prod环境下关闭source-map。

剥离css文件,单独打包

安装webpack插件extract-text-webpack-plugin。

npm install extract-text-webpack-plugin --save-dev。
//使用方法:
plugins:[
 new ExtractTextPlugin('static/css/styles.[contenthash].css'),
]

这里使用了contenthash,webpack会根据内容去生成hash值。

使用UglifyJSPlugin压缩。

通过UglifyJSPlugin可以压缩我们的*.js文件。

//安装方法: 
npm install uglifyjs-webpack-plugin --save-dev。
//使用方法
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
 plugins: [
 new UglifyJSPlugin({
 parallel: 4,
 uglifyOptions: {
 output: {
 comments: false,
 beautify: false,
 },
 compress: {
 warnings: false
 },
 },
 cache: true,
 }),
 ]
}

提取公共依赖

使用CommonsChunkPlugin插件,将多个js文件进行提取,建立一个独立的文件。这个文件包含一些共用模块,浏这样览器只在刚开始的时候加载一次,便缓存起来供后续使用。而不用每次访问一个新界面时,再去加载一个更大的文件。

 entry:{
	App:'./entry',
	vendor:['react','other-lib'],
 },
 plugins:[
	 new Webpack.optimize.CommonsChunkPlugin({
	 name: 'vendor',
	 }),
 ]

开启gzip压缩

我们使用compression-webpack-plugin插件进行压缩。 安装:npm install compression-webpack-plugin --save-dev。 compression-webpack-plugin 详细用法 使用:

const CompressionPlugin = require("compression-webpack-plugin");
plugins:[
new CompressionPlugin({
	 asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串
 algorithm: 'gzip',//算法
 test: new RegExp(
 '\.(js|css)$' //压缩 js 与 css
 ),
 threshold: 10240,//只处理比这个值大的资源。按字节计算
 minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
})
]

压缩结果:

如何解决webpack打包文件过大的问题

 


如何解决webpack打包文件过大的问题

 

开启html压缩,自动添加上面生成的静态资源

添加插件html-webpack-plugin。

//安装: 
npm install html-webpack-plugin --save-dev
//使用方法:
plugins:[
 new HtmlWebpackPlugin({
 title: '',
 template: __dirname + '/../public/index.html',
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeRedundantAttributes: true,
 useShortDoctype: true,
 removeEmptyAttributes: true,
 removeStyleLinkTypeAttributes: true,
 keepClosingSlash: true,
 minifyJS: true,
 minifyCSS: true,
 minifyURLs: true,
 },
 chunksSortMode:'dependency'
 }),
]


Tags:webpack   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
图片来源于网络;如有侵权请联系删除对于创建vue项目有很多种方法;但是我觉得这种是相对比较方便的;不用去配置打包啊一些配置了;而且操作也是非常简单;只需要几步就可以了;现在我...【详细内容】
2020-12-28  Tags: webpack  点击:(299)  评论:(0)  加入收藏
webpack 对我来说曾经是一个怪物般存在一样,因为它有太多太多的配置项,相反,使用像create-react-app脚手架可以很轻松创建项目,所以有一段时间内,我会尽量避免使用 webpack,因为它...【详细内容】
2020-11-17  Tags: webpack  点击:(125)  评论:(0)  加入收藏
摘要:Webpack是一种前端资源构建工具,一个静态模块打包器。1. 摘要Webpack是一种前端资源构建工具,一个静态模块打包器。在Webpack看来,前端的所有资源文件(js/json/css/img/les...【详细内容】
2020-11-06  Tags: webpack  点击:(131)  评论:(0)  加入收藏
通过插件我们可以扩展webpack,在合适的时机通过Webpack提供的 API 改变输出结果,使webpack可以执行更广泛的任务,拥有更强的构建能力。 本文将尝试探索 webpack 插件的工作流程,进而去揭秘它的工作原理。同时需要你对webp...【详细内容】
2020-05-20  Tags: webpack  点击:(66)  评论:(0)  加入收藏
回想在2015-2016年的时候,开发者们开始渐渐把视线从大量使用Task Runner的Grunt工具,转移到Gulp这种Pipeline形式的工具。Gulp还可以配合上众多个性化插件(如gulp-streamify),从而使得整个前端的准备工作链路,变得清晰易控,...【详细内容】
2020-03-11  Tags: webpack  点击:(67)  评论:(0)  加入收藏
webpack简介: webpack 是一个前端资源加载/打包工具。 他将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源为什么使用webpack: 转换Es6语法 ...【详细内容】
2019-10-21  Tags: webpack  点击:(112)  评论:(0)  加入收藏
vue-cli全家套相信很多人都用过,但可能很多人不太清楚webpack为解决打包文件过大做了哪些事情,今天我们就主要来聊聊这个。 首先配置全局变量首先,通过指定环境,告诉webpack我们...【详细内容】
2019-09-10  Tags: webpack  点击:(315)  评论:(0)  加入收藏
Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人对升级 Webpack 还是一头雾...【详细内容】
2019-09-09  Tags: webpack  点击:(161)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条