在使用 Vue.js 开发前端应用时，我们通常会使用 webpack 进行打包，将多个 JavaScript 文件合并成一个或几个文件，以便在浏览器中加载。但是，如果不加注意，打包后的文件可能会变得非常大，导致网页加载速度变慢，影响用户体验。本文将介绍一些解决 Vue.js 打包文件尺寸过大的方法。
1. 代码分割
代码分割是将应用程序的代码分成多个小块的过程，每个小块可以被独立加载。这样做的好处是，当用户访问页面时，只需要加载必要的代码，而不是全部代码，从而减少了加载时间。
在 Vue.js 中，可以使用 webpack 的代码分割功能，将组件、路由和第三方库等代码分成多个小块。例如，使用 import() 动态导入组件：
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')这样做可以将 Home 组件和 About 组件分别打包成不同的文件，只有在需要使用时才会加载。
2. 按需加载第三方库
第三方库通常是打包后文件尺寸过大的主要原因之一。但是，并不是所有第三方库都是必须的。在 Vue.js 中，可以使用 webpack 的 externals 配置，将不需要打包的第三方库从打包文件中排除。例如，将 Vue.js 和 Vue Router 从打包文件中排除：
module.exports = {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter'
}
}这样做可以减少打包后文件的尺寸，同时也可以让浏览器缓存这些库，提高网页加载速度。
3. 压缩打包文件
压缩打包文件是减少文件尺寸的最简单方法之一。在 webpack 中，可以使用 UglifyJSPlugin 和 OptimizeCSSAssetsPlugin 插件，对 JavaScript 和 CSS 文件进行压缩。例如，使用 UglifyJSPlugin 插件压缩 JavaScript 文件：
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJSPlugin()
]
}这样做可以减少打包后 JavaScript 文件的尺寸。
4. 使用 Tree Shaking
Tree Shaking 是一种将未使用的代码从打包文件中删除的技术。在 Vue.js 中，可以使用 webpack 的 UglifyJSPlugin 和 babel-preset-env 插件，将未使用的代码删除。例如，使用 babel-preset-env 插件：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -------
-
-
-
-
-
-这样做可以减少打包后文件的尺寸，提高网页加载速度。
5. 使用 CDN
CDN（Content Delivery Network）是一种将静态资源存储在多个服务器上的技术，可以加快网页加载速度。在 Vue.js 中，可以使用 CDN 加载 Vue.js 和其他第三方库，减少打包后文件的尺寸。例如，使用 unpkg.com 加载 Vue.js：
<script src="https://unpkg.com/vue"></script>
这样做可以减少打包后文件的尺寸，同时也可以让浏览器缓存这些库，提高网页加载速度。
结论
打包后文件尺寸过大是前端开发中常见的问题，但是可以通过代码分割、按需加载第三方库、压缩打包文件、使用 Tree Shaking 和使用 CDN 等方法来解决。这些方法都可以减少打包后文件的尺寸，提高网页加载速度，从而提高用户体验。
参考代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- -------------- - ----------------------------------
----- ----------------------- - ---------------------------------------------
----- - ------------------ - - -------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -----------
--
------------- -
---------- -
--- -----------------
--- -------------------------
-
--
-------- -
--- --------------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -------
-
-
--
-
----- ---------
---- -
---------------
------------
-
--
-
----- ---------
------- ------------
-
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6746b7c2e504cb428ec02b93