Laravel框架中缩小Vue应用的体积

最新推荐文章于 2024-08-15 16:36:09 发布
最新推荐文章于 2024-08-15 16:36:09 发布
阅读量84 收藏
点赞数
文章标签： php webpack javascript ViewUI
原文链接：https://juejin.im/post/5a688bd2518825732a6dadf6
版权

这两天写一个很小的Laravel+Vue的前后端分离应用，前端的代码文件并不多，但webpack打包生成的app.js居然有3M，生成的production版也有1.4M，放到自己的服务器上，那速度完全无法忍受。于是探究起如何缩小应用体积。

定位导致应用体积大的原因

这里使用webpack-bundle-analyzer，该插件可以将内容束显示为很直观的树状图，让你明白构建包中真正引入的内容。借助这个插件可以了解应用有哪些模块组成，找到不合时宜的存在，然后进行优化。

  1. 安装：npm install --save-dev webpack-bundle-analyzer
  2. 修改webpack.mix.js，注意Laravel自带的webpack-mix的配置方式与平常的webpack配置略有不同
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

mix.webpackConfig({
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
}).js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');
复制代码

修改完之后像平常一样使用npm run dev或npm run production打包应用，打包完成后，会自动打开http://127.0.0.1:8888来展示结果。

解决办法

从上面的这张图可以分析出导致应用体积变大的原因就是在于引用很多第三方库，这些库会被webpack一起打包到应用内，所以减小应用体积的最有效方法就是将这些库分离出去，别将它们与我们自己写的应用代码打包到一起。大部分有名的第三方库在公共CDN都有存放，如bootcss, unpkg等，速度飞快，可以直接引用。

webpack的选项有一个externals，可以指定哪些包不参与打包，即忽略掉相应import XXX from package，而代码中依旧可以通过CMD、AMD或window/global全局的方式访问。

mix.webpackConfig({
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
  externals: {
    'element-ui': 'Element',
    'axios': 'axios',
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'vue-chartjs': 'VueChartJs',
    'lodash': '_',
  }
}).js('resources/assets/js/app.js', 'public/js')
 .sass('resources/assets/sass/app.scss', 'public/css')
 .styles(['node_modules/element-ui/lib/theme-chalk/index.css'], 'public/css/element-ui.css');
复制代码

在blade文件中加入外链

<head>
    ...
    <script src="//cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/element-ui/2.0.11/index.js"></script>
    <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
    <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script src="//unpkg.com/vue-chartjs@2.8.7/dist/vue-chartjs.full.min.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css" rel="stylesheet">
    ...
</head>
复制代码

然后重新打包应用，最后生成的应用只有几十K了，这大小已经不成问题了

进一步优化

这里将第三方库完全改为外链，在生成环境内是没问题，但我们在开发时，并不希望每次都是从网络获取第三方库，网络加载始终不会有本地加载来的快，本地加载并不需要考虑大小问题。

我们可以通过使用环境变量来控制要不要使用外链。

在.env中添加一个变量MIX_EXTERNAL=true （注意：如果要在App应用里使用这个变量，这里必须是以 MIX_ 开头，参考 Mix 环境变量）

Laravel自带的webpack-mix默认不加载.env文件，但已经带有dotenv包，加载即可。

最后的webpack.mix.js文件如下

let mix = require('laravel-mix');
require('dotenv').config();

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

let externals = undefined;
if (process.env.MIX_EXTERNAL === 'true') {
  externals = {
    'element-ui': 'Element',
    'axios': 'axios',
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'vue-chartjs': 'VueChartJs',
    'lodash': '_',
  };
}

mix.webpackConfig({
  plugins: [
    // new BundleAnalyzerPlugin(),
  ],
  externals,
})
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .styles(['node_modules/element-ui/lib/theme-chalk/index.css'], 'public/css/element-ui.css');
复制代码

blade文件：

@if (env('MIX_EXTERNAL'))
    <script src="//cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="//cdn.bootcss.com/element-ui/2.0.11/index.js"></script>
    <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
    <script src="//cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script>
    <script src="//unpkg.com/vue-chartjs@2.8.7/dist/vue-chartjs.full.min.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.0.11/theme-chalk/index.css" rel="stylesheet">
@else
    <link rel="stylesheet" href="css/element-ui.css">
@endif
复制代码

应用内有些代码需要针对外链做区别处理，如ElementUI，如果使用import方式引入，需要加入Vue.use(ElementUI)，但如果使用外链时，这句会出错，所以可以加入判断

if (process.env.MIX_EXTERNAL !== 'true') { // **注意是字符串**
  Vue.use(Element);
}
复制代码

在app内使用process.env.MIX_XXXXX环境变量时，这些变量实际在打包过程中已经被替换为变量值（就像C里面的宏定义一样），不会在运行求值，也不存在process对象，上面的if语句在打包后变成if (false) Vue.use(Element)

至此优化完毕，只需在.env里修改一下变量，即可在两种打包方式间切换，可以愉快地继续开发了。

参考：

Webpack 打包优化之体积篇

weixin_34362991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
laravel+vue优化vue单文件过大 app.js过大
yhy1315的博客
08-18 5426
博主最近在写laravel+vue+element的一个项目,因为不是很了解webpack所以踩了不少坑，其中就有vue单文件过大问题，于是在这里记录下解决方法。 主要思路是分为两点。 减少webpack打包体积，将不用修改的库用cdn引入。 使用vue-router路由懒加载 1.cdn引入 cdn引入不需要修改app.js 现在我们来写一下，使得我们可以从外部引入而不...
laravel中缩小vue体积（vue优化）
qiqi学习园地
06-04 656
https://cryingbat.github.io/2018/06/02/laravel/#more 博客原文
Laravel框架中缩小webpack打包vue js的体积
a314753967的博客
10-10 1642
转载，原文： Laravel框架中缩小Vue应用的体积 https://www.codercto.com/a/12720.html laravel中 webpack打包生成的app.js居然有3M，生成的production版也有1.4M，放到服务器上，首页打开要十几秒（1M带宽）。于是探究起如何缩小应用体积。 定位导致应用体积大的原因 这里使用 webpack-bundle-analyze...
走进Vue2飞入Vue3
分享思想，留下痕迹。
07-12 1882
✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏： Vue ✨特色专栏： MySQL学习 🥭本文内容：走进Vue2飞入Vue3 🖥️个人小站 ：个人博客，欢迎大家访问 📚个人知识库： 知识库，欢迎大家访问Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项
laravel-mix-vue3:适用于Vue 3，Typescript和JSX的Laravel Mix扩展
05-28
Laravel Mix v5-Vue 3 适用于Vue 3，Typescript和JSX的Laravel ...vue3 --save-dev// oryarn add @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-mix-vue3 -D然后，在您的webpack.mix.js文件中要求它，
管理员：laravel + ant design vue权限后台
02-03
一个带角色权限控制的后台初始项目，前细分分离， Vue(antd) + PHP(Laravel) 功能 与laravel-admin一样的角色权限管理功能 文件管理器 配置管理 artisan命令 admin:init init- admin:init系统 admin:make-resource...
VUE3+Laravel后台节点权限管理系统
09-13
VUE3，Laravel，后台管理系统，后台系统，节点权限，后台管理权限，角色管理，角色权限
html+vue+laravel管理后台模板前端框架Vito
06-19
然后是Laravel，这是一个基于PHP的现代Web应用框架。Laravel提供了优雅的语法，让后端开发变得更加简单和高效。在Vito中，Laravel作为后端处理HTTP请求、数据库操作、认证授权等功能。它的Eloquent ORM简化了与...
Vue框架介绍及应用ppt
11-09
Vue 团队和发展现状介绍 设计思路及与其它框架的比较 生态介绍和方案推荐 3.0 新特性、改动介绍
文件上传-.user.ini利用
feiwujiushiwo的博客
08-13 226
php.ini是php的全局配置文件，对整个web服务起作用.user.ini和.htaccess都是目录的配置文件.user.ini是用户自定义的php.in理解为包含文件。
PHP图书借阅微信小程序系统源码
2401_84414018的博客
08-12 261
图书借阅微信小程序”不仅是一个借阅工具，更是你探索知识、享受阅读的得力助手。在这个快节奏的时代，让我们一起慢下来，用阅读滋养心灵，开启一段段美妙的阅读旅程吧！快来加入我们，发现更多阅读的乐趣和惊喜！📚🌟。
多媒体技术及应用课程思政网站
m0_73706453的博客
08-15 395
在Internet高速发展的今天，我们生活的各个领域都涉及到计算机的应用，其中包括多媒体技术及应用课程思政网站的网络应用，在外国多媒体技术及应用课程思政已经是很普遍的方式，不过国内的多媒体技术及应用课程思政可能还处于起步阶段。多媒体技术及应用课程思政网站具有学习音频功能。多媒体技术及应用课程思政网站采用PHP语言，Thinkphp5框架，基于mysql开发，实现了首页、个人中心、学生管理、教师管理、课程分类管理、学习视频管理、学习课程管理、学习音频管理、课程笔记管理、反馈留言、系统管理等内容进行管理，本系
PHPExcel兼容php7.4以上版本
itfans123的博客
08-15 161
参考官方文档：7.4 版本的向后不兼容更改，非数组的数组样式访问，现在，尝试将 null，bool，int，float 或 resource 类型的值用作数组 ( 例如 $null[“key”] )修改后的PHPExcel链接：https://pan.quark.cn/s/425905b39a48。php7.4后不支持 array{} 这种形式数组取值。PHPExcel 在php下报错。
在宝塔面板下安装WordPress
dgnankai的专栏
08-12 417
本次环境是在VMware WorkStation虚拟机中安装CentOS，以前介绍很多，网上教程也不少，这里不再赘述，如有需要可以参考我以前的博文。今天我们就利用“宝塔”面板在CentOS下搭建WordPress系统，完成一个案例网站的搭建，后续内容的讲解也可以在此基础上不断完善。宝塔面板是服务器管理好助手，尤其在Linux系统下，提高了管理的可视化，降低了Linux服务器的使用门槛。是个非常好的博客系统，由于支持海量主题模板、各种类型的插件，因此已经成为建设各类网站的首选框架。
解决域名加别名后再代理或者映射到fastadmin项目
weixin_51957364的博客
08-12 246
如果遇到微应用不想再添加或者不方便添加单独的二级域名时，就需要用到代理或者映射来进入到我们的微应用项目中。然后再修改config.php文件里面的view_replace_str参数，添加你的域名加别名就可以了。可以修改route.php路由文件的下面这个参数。最后记得一定要再后台一键清理缓存！
优化之光：用Xdebug照亮PHP性能的阴影
2401_85761762的博客
08-12 597
Xdebug的性能分析工具能够帮助开发者深入理解代码的执行效率，并通过可视化工具快速定位性能瓶颈。同时，其他工具如Blackfire、XHProf等也为PHP性能分析提供了多样化的选择。Xdebug作为PHP开发者的得力助手，不仅提供了强大的调试功能，其性能分析工具也能帮助开发者深入理解代码的执行效率。本文将详细介绍如何使用Xdebug进行PHP性能分析，以及其他可用的工具，让开发者能够有效识别并优化性能瓶颈。通过本文的介绍，你应该对如何使用Xdebug以及其他工具进行PHP性能分析有了更深入的了解。
PHP概述、环境搭建与基本语法讲解
最新发布
m0_74249600的博客
08-15 671
本文介绍了学习php所需的前提概念，并且在概述与安装环境的基础上对web渗透所需的php基本语法进行了讲解，读者可自行进行语法练习与实战
H5漂流瓶交友源码_社交漂流瓶H5源码
jiyc2008的博客
08-15 131
H5漂流瓶交友源码_社交漂流瓶H5源码
怎么在laravel框架里使用vue
05-22
在 Laravel 中使用 Vue.js 可以通过以下几个步骤实现： 1. 在 Laravel 项目中安装 Node.js 和 NPM。 2. 安装 Laravel Mix。 ```bash npm install --save-dev laravel-mix ``` 3. 安装 Vue.js。 ```bash npm install --save vue ``` 4. 在 Laravel 项目的 resources/assets/js 目录中创建 Vue.js 组件。例如，可以创建一个名为 Example.vue 的组件。 ```html <template> <div> <h1>Hello World!</h1> </div> </template> <script> export default { data() { return { message: 'Hello World!', } } } </script> ``` 5. 在 Laravel 项目的 resources/assets/js/app.js 文件中引入 Vue.js 和创建的组件。 ```javascript require('./bootstrap'); import Vue from 'vue'; import Example from './components/Example.vue'; const app = new Vue({ el: '#app', components: { Example, } }); ``` 6. 在 Laravel 项目的 resources/views 目录中创建 Blade 模板。例如，可以创建一个名为 welcome.blade.php 的模板。 ```html <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link rel="stylesheet" href="{{ mix('/css/app.css') }}"> </head> <body> <div id="app"> <example></example> </div> <script src="{{ mix('/js/app.js') }}"></script> </body> </html> ``` 7. 在 Laravel 项目的 routes/web.php 文件中定义路由。 ```php Route::get('/', function () { return view('welcome'); }); ``` 8. 运行 Laravel Mix 编译前端资源。 ```bash npm run dev ``` 9. 在浏览器中访问 http://localhost:8000 即可看到 Vue.js 组件在 Laravel 中的使用效果。 以上是在 Laravel 中使用 Vue.js 的基本步骤，根据实际情况进行适当调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值