webpack 优化代码 让代码加载速度更快
一,如何优化webpack构建
(1),缩小文件搜索范围,
- 优化Loader配置
module.exports = {
module: {
rules: [
{
test:/\.js$/,
use:['babel-loader?cacheDirectory'],
include: path.resolve(__dirname,'src') }, ]
}
}我们可以适当的调整项目的目录结构,方便在配置Loader时候通过include缩小命中范围。
- 优化resolve.modules的配置
resolve.modules的默认值是node_modules,如果没有就去上一层文件去寻找,以此类推,
当安装的第三方模块放在根目录./node_modules的时候,就没必要按照默认方式去找,减少寻找配置如下:module.exports = {
resolve:{
modules: [path.resolve(__dirname, 'node_modules')]
}
} - 优化resolve.mainFields配置
我们安装的第三方的模块都会有pack.json文件,resolve.mainFields用来配置入口文件。
当target为web时或者webworker,其默认值为['browser','main','module']
当target为其他情况时:其默认值为['main','module']
为了减少搜索步骤,由于是第三方模块都采用main字段去描述入口文件,所以如下配置:module.exports = {
resolve:{
mainFields: ['main']
}
}
未完待续。。。。。。。。。。。。
webpack 优化代码 让代码加载速度更快的更多相关文章
- Vue代码分割懒加载的实现方法
什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...
- java对象的方法属性和代码块的加载顺序
1.静态变量 2.静态代码块 3.局部代码块 4.构造函数 5.普通代码块 6.静态方法 7.普通方法 8.普通属性 for example: package com.JavaTest2; publi ...
- webpack学习笔记--按需加载
为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...
- hexo next主题深度优化(二),懒加载。
文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hex ...
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- JavaScript 放置在文档最后面可以使页面加载速度更快
JavaScript 放置在文档最后面可以使页面加载速度更快
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- 前端性能优化之按需加载(React-router+webpack)
一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近 ...
- [原创]Android Lollipop (5.0) 原生代码 Settings 首页加载逻辑分析
主入口为com.android.settings.Settings. 这只是一个wrapper的类, 它继承于 SettingsActivity类,并且声明了一堆公有的继承于SettingsActiv ...
- 检测js代码是否已加载的判断代码
该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方 ...
随机推荐
- first-软件工程
第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 之前高中班上男生特别喜欢软件这类的东西,每期电脑报都要买,我也会每期电脑报都会借来看,久而久之我就喜欢上 ...
- SQL Server ->> 尝试优化ETL中优化Merge性能
这几天突发想到在ETL中Merge性能的问题.思路的出发点是Merge到目标表需要扫描的数据太多,而现实情况下,假设应该是只有一小部分会被更新,而且这部分数据也应该是比较新的数据,比方说对于想Fact ...
- LearnHowToThink
一.BubbleSort and XListview 1.BubbleSort (1)analysis traverse.compare.exchange.cycle.optimize strateg ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
- 【java基础】随手写的一个日期计算,新手可以看看
随手写的一个例子, 只是练习下自己的代码布局以及思路.. 1. 先写下简单的测试 2. 根据常用的不用修改的变量抽取出来, 作为常量(常量的命名可能有点不规范,谅解~) 3. 方法的作用不一样, 抽取 ...
- 不错的.net开源项目
Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...
- 发布Hessian服务作为服务内部基础服务
摘要:Hessian经常作为服务内部RPC工具来使用,速度快效率高.重构代码的核心思想就是把共用的代码段提出来,使代码结构优化:架构设计类似,把基本的共用的服务提出来,使架构优化.下面讲述一下我在具体 ...
- Java对象表示方式1:序列化、反序列化的作用
1.序列化是的作用和用途 序列化:把对象转换为字节序列的过程称为对象的序列化. 反序列化:把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存 ...
- miniui dataGrid drawcell事件
var grid = mini.get("tpaTotal2_grid"); //grid.load(); //单元格绘制事件 grid. ...
- PHP----练习----光标离开文本框时变色
题目::创建若干个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色. <!DOCTYPE html PUBLIC "-//W3C//DT ...