一,如何优化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 优化代码 让代码加载速度更快的更多相关文章

  1. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  2. java对象的方法属性和代码块的加载顺序

    1.静态变量 2.静态代码块 3.局部代码块 4.构造函数 5.普通代码块 6.静态方法 7.普通方法 8.普通属性 for example: package com.JavaTest2; publi ...

  3. webpack学习笔记--按需加载

    为什么需要按需加载 随着互联网的发展,一个网页需要承载的功能越来越多. 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里 ...

  4. hexo next主题深度优化(二),懒加载。

    文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hex ...

  5. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  6. JavaScript 放置在文档最后面可以使页面加载速度更快

    JavaScript 放置在文档最后面可以使页面加载速度更快

  7. vue项目优化之按需加载组件-使用webpack require.ensure

    require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...

  8. 前端性能优化之按需加载(React-router+webpack)

    一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近 ...

  9. [原创]Android Lollipop (5.0) 原生代码 Settings 首页加载逻辑分析

    主入口为com.android.settings.Settings. 这只是一个wrapper的类, 它继承于 SettingsActivity类,并且声明了一堆公有的继承于SettingsActiv ...

  10. 检测js代码是否已加载的判断代码

    该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方 ...

随机推荐

  1. first-软件工程

    第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 之前高中班上男生特别喜欢软件这类的东西,每期电脑报都要买,我也会每期电脑报都会借来看,久而久之我就喜欢上 ...

  2. SQL Server ->> 尝试优化ETL中优化Merge性能

    这几天突发想到在ETL中Merge性能的问题.思路的出发点是Merge到目标表需要扫描的数据太多,而现实情况下,假设应该是只有一小部分会被更新,而且这部分数据也应该是比较新的数据,比方说对于想Fact ...

  3. LearnHowToThink

    一.BubbleSort and XListview 1.BubbleSort (1)analysis traverse.compare.exchange.cycle.optimize strateg ...

  4. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  5. 【java基础】随手写的一个日期计算,新手可以看看

    随手写的一个例子, 只是练习下自己的代码布局以及思路.. 1. 先写下简单的测试 2. 根据常用的不用修改的变量抽取出来, 作为常量(常量的命名可能有点不规范,谅解~) 3. 方法的作用不一样, 抽取 ...

  6. 不错的.net开源项目

    Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...

  7. 发布Hessian服务作为服务内部基础服务

    摘要:Hessian经常作为服务内部RPC工具来使用,速度快效率高.重构代码的核心思想就是把共用的代码段提出来,使代码结构优化:架构设计类似,把基本的共用的服务提出来,使架构优化.下面讲述一下我在具体 ...

  8. Java对象表示方式1:序列化、反序列化的作用

    1.序列化是的作用和用途 序列化:把对象转换为字节序列的过程称为对象的序列化. 反序列化:把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存 ...

  9. miniui dataGrid drawcell事件

    var grid = mini.get("tpaTotal2_grid");        //grid.load();        //单元格绘制事件        grid. ...

  10. PHP----练习----光标离开文本框时变色

    题目::创建若干个输入文本框,当光标离开文本框的时候如果文本框为空,则将文本框背景色设置为红色,如果不为空则为白色. <!DOCTYPE html PUBLIC "-//W3C//DT ...