性能优化杂记

webpack

  • 开发、生产环境配置不同的webpack配置文件

  • 生产环境删除devServer（不需要启webpack devServer）
    在这里插入图片描述
    在这里插入图片描述

  • 告诉webpack，生产、开发分别要对应哪个配置文件
    在这里插入图片描述

  • 开发环境下也能看到打包的结果 npm run dev:build
    在这里插入图片描述

  • npm run dev 只会把打包生产的文件放在内存里，这样读写的速度会比较快，是看不到dist文件夹的

  • 安装wepack-merge 将dev.js 与 prod.js里重复的部分放在base.js里

  • 在dev.js 与 prod.js里引入base.js导出的
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 不同版本的写法不同
    在这里插入图片描述
    webpack定义、配置文件
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/251182.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法 --- 冒泡排序、选择排序、插入排序的js实现

算法 --- 冒泡排序、选择排序、插入排序的js实现

冒泡排序: function bubbleSort(arr){let i arr.length;while(i >0){for(let j 0; j< i; j) {let pos 0;if(arr[j] > arr[j1]) {pos j;let temp arr[j];arr[j] arr[j1];arr[j1] temp;}}i pos;}return arr; } var arr [3,44,38,5,47,15,36,26,27,2,46,4,19,5…
阅读更多...
appium--每次启动会重新安装的问题(没试过)

appium--每次启动会重新安装的问题(没试过)

有人说加这个 最后 大神说 在appium哪里就可以设置了 对&#xff0c;第一个不勾选就不会安装了【经理】[Java]大连●Messi_Z(726862194) 15:54:10把这些东西全去掉就好了转载于:https://www.cnblogs.com/kaibindirver/p/8205031.html
阅读更多...
爬虫从入门到放弃 - 纯新手学习-爬虫基本原理

爬虫从入门到放弃 - 纯新手学习-爬虫基本原理

1.什么是爬虫&#xff1f; 请求网站并提取数据的自动化程序 请求&#xff1a;客户端向服务端发送请求获得网页资源&#xff0c;是一段html代码&#xff0c;包含html标签和一段信息。 提取&#xff1a;提取出想要的信息&#xff0c;然后将结构化的数据存储到文本 自动化&#xf…
阅读更多...
ES5-11原型与原型链深入、对象继承

ES5-11原型与原型链深入、对象继承

原型 谁调用&#xff0c;this就指向谁&#xff0c;当实例对象有该属性时&#xff0c;不会去原型上查找 创建对象的两种方法&#xff1a;字面量、new Object&#xff08;&#xff09;一般不用后面的二者创建出来的对象没有差异 Object.create() var 实例 Object.create(对象…
阅读更多...
算法 --- 希尔排序、归并排序、快速排序的js实现

算法 --- 希尔排序、归并排序、快速排序的js实现

希尔排序: function shellSort(arr) {let len arr.length;let temp, gap 1;while(gap < len/3) {gap gap*3 1}while(gap >1) {for(let i gap;i< len; i) {temp arr[i];for( var j i-gap; j> 0 && arr[j] > temp; j - gap) {arr[j gap] arr[j];}…
阅读更多...
ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化

ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化

继承深入 这两种方式继承不够合理&#xff08;为什么&#xff09; 将实例作为子类的原型 在子类的构造函数内部借用父类的构造函数 将父类的原型作为子类的原型&#xff08;会修改父类的原型&#xff09; css圣杯布局&#xff08;左右宽度固定、中间自适应&#xff09…
阅读更多...
vue实现星级评价效果

vue实现星级评价效果

希望对你们有用&#xff0c;已经自己试过可以的才发布出来的 效果如下&#xff1a; html&#xff1a; <template> <div class"evaStar"> <ul class"star"> <li v-for"(itemClass,index) in itemClasses" :class"itemC…
阅读更多...
算法 --- 二叉树查找树的先序(中序、后序)遍历的js实现

算法 --- 二叉树查找树的先序(中序、后序)遍历的js实现

结点: function Node(data, left, right) {this.data data;this.left left;this.right right;this.show show; }显示树的数据: function show(){return this.data; }二叉查找树: // Binary Search Tree function BST(){this.root null;this.insert insert; }添加结点到…
阅读更多...
ES5-13 对象属性遍历、this、callee、caller

ES5-13 对象属性遍历、this、callee、caller

链式调用 在每个函数内部return this 访问对象属性 点语法[]中括号内是字符串或是变量 数组是特殊的对象 对象属性遍历 for in(遍历对象或数组) - 不必再用Object.keys那么麻烦了 for(var key in obj){console.log(obj[key])// obj.key返回undefined// 因为js引擎会转换为…
阅读更多...
算法 --- 顺序查找、二分查找的js实现

算法 --- 顺序查找、二分查找的js实现

顺序查找: function seqSearch(arr, data) {for(let i 0; i< arr.length;i) {if(data arr[i]) {return i;}}return -1 } var arr[3,44,38,5,47,15,36,26,27,2,46,4,19,50,48]; console.log(seqSearch(arr, 15))二分查找: function binSearch(arr, data) {let low 0;let…
阅读更多...
vue --- cdn导入,一些基本操作

vue --- cdn导入,一些基本操作

使用cdn导入vue.并使用vue做一些简单的操作. cdn导入vue: <script src"https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>vue-router的CDN导入: <script src"https://unpkg.com/vue-router2.5.3/dist/vue-router.js"></scrip…
阅读更多...
ES5-14 【utils】三目运算符、对象克隆、浅拷贝、深拷贝

ES5-14 【utils】三目运算符、对象克隆、浅拷贝、深拷贝

浅拷贝 for-in&#xff08;遍历一个实例对象&#xff0c;原型上的属性也会打印&#xff09; Object.prototype.num 1 function shallowClone(origin, target) {for (var key in origin) {target[key] origin[key]} } var p1 {name: 人类,daughter: {first: Jessica,} } va…
阅读更多...
java代理的原理及应用

java代理的原理及应用

什么是代理模式&#xff1f; 定义 为其他对象提供一种代理以控制对这个对象的访问。在某些情况下&#xff0c;一个对象不适合或者不能直接引用另一个对象&#xff0c;而代理对象可以在客户端和目标对象之间起到中介的作用。 ——百度百科 代理模式的角色 抽象角色&#xff1a;代…
阅读更多...
vue --- 过滤器、计算、方法、观察属性

vue --- 过滤器、计算、方法、观察属性

过滤器属性:filters: <div id "app">{{num}}<br>{{num | toInt}}<br>{{num | toFloor}}<br>{{num | toCeil}}<br> </div> <script>let vm new Vue({el: #app,data:{num:3.45,},// 过滤器filters:{toInt(value){return …
阅读更多...
《你不知道的JavaScript（上卷）》读书笔记

《你不知道的JavaScript（上卷）》读书笔记

第一次尝试用思维导图记笔记&#xff0c;感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 。 因为开始学JS的时候&#xff0c;一般浏览器就已经支持ES6了&#xff0c;所以比较喜欢使用ES6语法&#xff0c;let&#xff0c;>等&#xff0c;文中代码不是抄书的&#…
阅读更多...
ES5-15 数组基础、数组方法、数组排序

ES5-15 数组基础、数组方法、数组排序

创建数组 字面量 var arr []构造函数 var arr new Array()不使用new var arr Array() 所有数组都继承于Array.prototype&#xff0c;能使用其中的数组方法 数组是另一种形式的对象&#xff0c;访问机制相同数组的empty项打印出来是undefined&#xff0c;empty不是值只是一个…
阅读更多...
vue --- vue中的几个钩子属性

vue --- vue中的几个钩子属性

1.创建前:beforeCreate <div id"app">{{name}}</div><script>let app new Vue({el:#app,data:{name:31231312},beforeCreate(){console.log(挂在前);console.log(this.$data);console.log(this.$el);}})</script>// beforeCreate()是在Vue挂…
阅读更多...
ES5-16【utils】数组方法、类数组

ES5-16【utils】数组方法、类数组

数组方法 concat 返回值是拼接后的数组 toString 将数组转成字符串&#xff0c;用逗号隔开 slice(a&#xff0c;b) [a&#xff0c;b) 不传值&#xff0c;拷贝了一份不传b&#xff0c;截取到最后一位传b&#xff0c;截取到b之前的那位a/b是负数&#xff08;和splice一样&a…
阅读更多...
Catalan卡塔兰数

Catalan卡塔兰数

卡塔兰数 卡塔兰数是组合数学中一个常出现在各种计数问题中出现的数列。由以比利时的数学家欧仁查理卡塔兰 (1814–1894)命名。 卡塔兰数的一般项公式为 另类递归式&#xff1a; h(n)((4*n-2)/(n1))*h(n-1); 前几项为: 1, 1, 2, 5, 14, 42, 132, 429, …
阅读更多...
vue --- v-html、v-bind

vue --- v-html、v-bind

v-html // 有时候,我们需要展示<strong>,但直接使用下面的语法并不会显示 <div id "app">{{name}}</div><script>let app new Vue({el:#app,data:{name:<strong>啦啦啦</strong>}}); </scritp> // 结果当然没让人失望此…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023