浅谈webpack打包之后的文件过大的解决方法


Posted in Javascript onMarch 07, 2018

以前一直使用 create-react-app 这个脚手架进行 react 开发,后面因为一些自定义的配置,转而使用 webpack 搭建一套自己的脚手架。但是在使用 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官方文档,Devtool配置对比 , webpack sourcemap 选项多种模式的一些解释 , 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 。 用法: UglifyJSPlugin详细用法

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'
   }),
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
js 动态文字滚动的例子
Jan 17 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 #Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 #Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 #Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 #Javascript
关于Vue的路由权限管理的示例代码
Mar 06 #Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 #Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 #Javascript
You might like
十天学会php之第六天
2006/10/09 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
浅谈Python的异常处理
2016/06/19 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python中无限循环需要什么条件
2020/05/27 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
分公司经理岗位职责
2013/11/11 职场文书
迎元旦广播稿
2014/02/22 职场文书
简单租房协议书
2014/04/09 职场文书
2019同学聚会主持词
2019/05/06 职场文书
redis限流的实际应用
2021/04/24 Redis
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers