vue-cli2.x项目优化之引入本地静态库文件的方法
demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource
vue-cli 将静态资源文件放到 static 文件夹下并引用:
1.将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下
2.index.html 修改
添加script引入
<script src="static/js/vue.min.js"></script> <script src="static/js/vue-router.min.js"></script>
3.修改 build/webpack.base.conf.js 文件:
注释掉下面这行
resolve: { extensions: ['.js', '.vue', '.json'], alias: { // 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },
添加externals部分(externals 和 resource 同级)。
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter' },
优化后,速度对比
优化前编译时长 | 优化后编译时长 | 优化前build时长 | 优化后build时长 |
---|---|---|---|
300~400ms | 200ms左右 | 8435ms | 4332ms |
优化前文件大小:
优化后文件大小:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue-cli与webpack处理静态资源的方法及webpack打包的坑
通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了. 我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决. cd vue demo npm run dev //运行程序 npm run bulid //webpack打包 处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/a
-
详解vue-cli与webpack结合如何处理静态资源
处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/assets和static/,他们两者的区别是什么呢? 打包的资源 为了回答这个问题,我们首先要明白Webpack是如何处理静态资源的.在*.vue组件里,所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL. 举个例子,在<img src"./logo.png">和背景background: url(.
-
vue-cli2.x项目优化之引入本地静态库文件的方法
demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource vue-cli 将静态资源文件放到 static 文件夹下并引用: 1.将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下 2.index.html 修改 添加script引入 <script src="static/js/vue.min.js"></script> <scrip
-
Vue 2.5.2下axios + express 本地请求404的解决方法
最近在学习Vue,今天尝试了使用axios模拟本地网络请求.使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写. 1.引入相关依赖 var axios = require('axios') const express = require('express'); var app = express(); var apiRoutes = express.Router(); app.use('/api', apiRoutes); 2.处理网络请求
-
Vue Cli 3项目使用融云IM实现聊天功能的方法
介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能. 效果如图(PC+移动): 一.申请融云账号(token.appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二.引入融云IM 如图: 位置:public/index.html,引入 <script src="https://cdn.ronghub.com/RongIMLib-2.3.5.min.js"></script> 三.可以正常使用
-
vue引入静态js文件的方法
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件
-
vue编译打包本地查看index文件的方法
/build/config/index.js assetsPublicPath: './'(编译出来可以本地查看,'/'没有点的就直接发布到线上) 以上这篇vue编译打包本地查看index文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
在vue.js中使用JSZip实现在前端解压文件的方法
1. 在vue文件的html中引入element的上传控件,代码如下: <div> <el-upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBefore"> <el-button size="small" type="primary">点击上传</el-button> <
-
Node.js 在本地生成日志文件的方法
平常都使用console来打印 node 脚本执行时需要看到的信息,但这些信息也就只能在控制台查看.假如你希望将打印的信息输出到日志(log)文件查看的话,那就往下看看吧. 1.前言 期望: 每次运行脚本时,生成log日志存储到本地 每次执行脚本,之前日志内容清空 需要了解的知识点: fs new console.Console 2.什么是 fs 使用 node.js 对日志进行存储,就一定会对本地文件的增删改查,那么我们需要用到fs. 如果你写过 node,想必你应该见过它fs,fs全称为文件
-
Python代码打开本地.mp4格式文件的方法
想通过编写Python代码来打开本地的.mp4格式文件,使用os模块来操作文件.我的电脑默认的是QQ影音播放器,执行Python代码打开默认播放器,播放代码中指定的视频文件. class Video(object): def __init__(self,path): self.path = path def play(self): from os import startfile startfile(self.path) class Movie_MP4(Video): type = 'MP4'
-
vue 2.0项目中如何引入element-ui详解
前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)
-
jquery引入外部CDN 加载失败则引入本地jq库
由于第三方cdn库的盛行,很多朋友会选择使用第三方的类库,从学习上来说不建议大家都使用类库,这样我们失去了很多学习的机会,但使用上来说解决了很多代码兼容问题,这里都不多说了. 使用CDN加载jQuery类库一是可以省一点带宽,二是可以给用户带来更快的页面加载体验. 因为个人网站规模与cdn的带宽问题,现在cdn费用虽然下来了,但也有不给力的时候,很多朋友都会选择使用第三方的jquery库,个人推荐几个国内的 百度.新浪.bootcdn 下面的两段代码的作用 如果cdn的jquery没有加载进来,
随机推荐
- MyBatis的foreach语句详解
- CSS的margin边界叠加深度剖析图文演示
- 探索PowerShell (二) PowerShell的基本操作
- 使用Lua编写Nginx服务器的认证模块的方法
- javascript下高性能字符串连接StringBuffer类
- 修改月光博客网站中PHP常用正则表达式中出现的错误
- 使用Aspose.Cells组件生成Excel文件实例
- 用javascript实现页面打印的三种方法
- jsp用过滤器解决中文乱码问题的方法
- mysql数据迁移到Oracle的正确方法
- 解决canvas画布使用fillRect()时高度出现双倍效果的问题
- JavaScript将当前时间转换成UTC标准时间的方法
- 详解Node.js项目APM监控之New Relic
- 将光标定位于输入框最右侧实现代码
- 使用Ruby on Rails快速开发web应用的教程实例
- JS中获取函数调用链所有参数的方法
- javascript中 try catch用法
- C#实现利用Windows API读写INI文件的方法
- android studio生成aar包并在其他工程引用aar包的方法
- Java8如何将Array转换为Stream的实现