随笔分类 - 构建工具
摘要：对于现在的前端项目而言，编译发布几乎是必需操作，有的编译只需要几秒钟，快如闪电，有的却需要10分钟，甚至更多，慢如蜗牛。特别是线上热修复时，分秒必争，响应速度直接影响了用户体验，用户不会有耐心等那么长时间，让你慢慢编译；如果涉及到支付操作，产品损失更是以秒计，每提前哪怕一秒钟发布，在腾讯海量用户面前
阅读全文
摘要：推荐先阅读 webpack 入门教程之后再来阅读本文。 Webpack 4 和单页应用入门 手摸手，带你用合理的姿势使用 webpack4 （上） 本文为手摸手使用 webpack4（下），主要分为两部分： 怎么合理的运用浏览器缓存 怎么构建可靠的持久化缓存 #默认分包策略 webpack 4 最大
阅读全文
摘要：利用 Webpack 来优化 Web 性能属于加载性能优化 的一部分： ☛ Web Performance Optimization with webpack 本文目录： 减少前端资源体积 使用长期缓存 监控和分析应用程序 总结 一、减少前端资源体积 1、webpack 4 开启 productio
阅读全文
摘要：默认值 开箱即用的 SplitChunksPlugin 应该对大多数用户都很好用。 默认情况下，它只影响随需应变的块，因为更改初始块会影响运行项目时包含的应有脚本标记 HTML 文件。 webpack 将根据以下条件自动分割块: 新块可被共享的，或者来自 node_modules 文件夹 新块将大于
阅读全文
摘要：之前接手的一个旧项目，使用的是roadhog + dva + antd等技术，里面大概有上百个路由文件，其他model、组件等文件也不少，导致整个项目的模块文件非常多，热更新和打包都速度都比较慢，输出代码体积也很大。基于这个问题，本文整理webpack常用的一些优化手段。 <!--more--> 参
阅读全文
摘要：提取公共js代码 前言 项目中我们常遇到项目中有多个入口文件的情况，这时候如果有两个入口文件引用了相同的模块，这时候如果我们没有做任何处理的话，在打包时就会把这个相同的模块打包两次，这样既影响了性能，又降低了我们的代码质量，本文就介绍一种解决该现象的插件，来提取公共的js代码。 条件 该方法只适用于
阅读全文
摘要：一、前言 之前一直也没有研究过webpack4是基于怎样的规则去拆分模块的，现在正好有时间打算好好了解一下，看了官方文档也陆陆续续的看了看网上别人写的文章，感觉大部分都是将官方文档翻译了一遍，很多问题都没有解释清楚，无奈只好自己写demo去通过实际编译结果来理解，经过一天多的不断调试和百度，基本弄清
阅读全文
摘要：一、安装 二、在webpack.config.js中配置module 1 2 3 4 5 6 7 8 9 module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-lo
阅读全文
摘要：一、前言 2018/2/25，webpack4正式发布，距离现在已经过去三个多月了，也逐渐趋于稳定，而且现在的最新版本都到了4.12.0（版本迭代快得真是让人害怕）。 很多人都说webpack复杂，难以理解，很大一部分原因是webpack是基于配置的，可配置项很多，并且每个参数传入的形式多种多样（可
阅读全文
只有注册用户登录后才能阅读该文。
摘要：前言 最近由于项目需求，选择使用vue框架，webpack打包直接使用的vue-cli，因为需要多页面而vue-cli只有单页面，所以就决定修改vue-cli的配置文件来满足开发需求。 html-webpack-plugin 实现需求需要用到这个插件， 具体信息请看这里 对于多页面入口我们需要在插件
阅读全文
摘要：前言 研究了下别人的 vue 多页面框架, 都是直接复制 package.json 文件,然后在本地 npm install 一下即可, 或者使用官网 vue-cli 工具生成一个项目, 觉得这样虽然看的懂, 但是记不住, 因此有必要从零开始搭建一个使用 .vue 作为组件的项目练习一下, 因此有了
阅读全文
摘要：简介 webpack作为当前最为流行的模块打包工具，几乎所有的主流前端开发框架（React、Vue等）都会将其作为默认的模块加载和打包工具。通过简单的配置项，使用各种相关的loader和plugin，我们就可以实现自动的模块依赖分析并打包，从而大大降低了前端项目的开发复杂度，明显提高了前端项目的开发
阅读全文
摘要：最近在用webpack优化首屏加载性能，通过几种插件之后我们上线前后的速度快了一倍，在此就简单的分享下吧，先上个优化前后首屏渲染的对比图。 可以看到总下载时间从3800ms缩短到1600ms。 我们在用webpack时一般都会选择多入口文件吧，为的就是将自己的源码跟第三方库代码分离。这是之前的代码，
阅读全文
摘要：在我们的产品中，均使用CSS Modules来作为样式解决方案，大致的代码是这样的： import React from 'react'; import styles from './table.css'; export default class Table extends React.Compo
阅读全文
摘要：自己的react项目用到了css-modules,由于不太想在写className时写style.xxx于是google解决方案，找到了这货->babel-plugin-react-css-modules。 然而写配置时踩了无数坑，网上唯一一篇中文讲使用的文章也过时了(webpack...)，结合g
阅读全文
摘要：用webpack的过程，就是一个不断入坑和出坑的过程。回望来时路，一路都是坑啊！现把曾经趟过的那些坑整理出来，各位看官有福了~ 文章末尾有我用到的依赖的版本信息，若你发现某个问题与我在本文中的描述不一致时，可以看看是否版本与我所使用的不同所致。 一、Mac平台和Windows平台的差异导致的问题 1
阅读全文
摘要：当前项目结构 项目结构 其中 Greeter.js 引用了 config.json main.js 和 second.js 都引用了 Greeter.js main.js 还引用了 onlyformain.js second.js 还引用了 onlyforsecond.js 代码如下 // conf
阅读全文
摘要：方式一，传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js 方式二，有选择的提取公共代码 方式三，有选择性的提取（对象方式传参） 推荐 通过Commons
阅读全文
摘要：source maps Webpack打包生成的.map后缀文件，使得我们的开发调试更加方便，它能帮助我们链接到断点对应的源代码的位置进行调试（//# souceURL），而devtool就是用来指定source-maps的配置方式的。以下是官方文档的说明： source maps 开发工具(Dev
阅读全文