<commit_before>---
layout: post
title: 打包后文件太大优化
category: workFighting
tags: 打包后文件太大优化
keywords: 打包后文件太大优化
description: 打包后文件太大优化
---

## 打包后的JS要是很大，该怎么解决？
1.压缩 UglifyJsPlugin插件

2.按需加载 

3.剥离了css文件 

4.开启了gzip压缩


OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID

UglifyJsPlugin：压缩JS代码；

ExtractTextPlugin：分离CSS和JS文件<commit_msg>Update 2018-07-18-打包后文件太大优化.md<commit_after>---
layout: post
title: 打包后文件太大优化
category: workFighting
tags: 打包后文件太大优化
keywords: 打包后文件太大优化
description: 打包后文件太大优化
---

## 打包后的JS要是很大，该怎么解决？
1.压缩 UglifyJsPlugin插件

2.按需加载 

3.剥离了css文件 

4.开启了gzip压缩


OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID

UglifyJsPlugin：压缩JS代码；

ExtractTextPlugin：分离CSS和JS文件

### 使用 Webpack 优化项目
对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩

使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码

优化图片，对于小图可以使用 base64 的方式写入文件中

按照路由拆分代码，实现按需加载

给打包出来的文件名添加哈希，实现浏览器缓存文件
{'fraction_non_alphanumeric': 0.07845303867403315, 'fraction_numerical': 0.022099447513812154, 'mean_word_length': 6.743589743589744, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3870510', 'n_tokens_mistral': 601, 'n_tokens_neox': 667, 'n_words': 63}