goutinga的博客

前言devtool也是之前常用的一个配置，我们稍微了解下吧，不研究太深，毕竟现在都不怎配置他。内容devtool是配置sourceMap的。sourceMap大家都知道，我们本地或者测试环境出了错误，可以在source中迅速定位错误，用到的就是 .map (map文件)，这个文件中是源文件映射(主要是源文件代码)。但是我们在network中看不到.map文件的请求，盲猜一波是浏览器做了屏蔽，不让我们看这种请求。(毕竟是源码，我单独下载map文件是可以下载下来的)接下来，当devtool被配置为

前言用过webpack已经很久了，一直没有好好研究过分包，今天花点时间来好好研究下这个。优势打包优化： 公共代码提取，体积变小用户体验优化：按需加载，下载更快，白屏更短过程module、chunk和bundle要研究分包，首先要分清这三个概念module: 模块，每个import 都是一个module模块chunk: 依赖链路模块，我的个人理解，因为从一开始的entry配的入口文件开始，随着递归寻找其他的依赖文件，最后把所有的依赖串起来，这就是一个chunk。但是我们可以拆分多个chu

动态加载和静态加载指的是什么时候加载，动态加载是运行时加载（CommonJS），静态加载是编译(预编译)时加载（ES6）。当然es6也提供的动态加载，即import() 。动态加载：require() 、import()静态加载：import同步加载还是异步加载指的是加载的方式。 静态加载中都是同步加载的。动态加载中CommonJS的require是同步的。而es6import()是异步的。同步加载：import 、 require()异步加载：import（）、 require(['xxx'

前言最近优化了一些webpack项目的构建体积与速度，结合公司做的一些默认配置，大部分应用打包速度已经快到飞起，在这记录一下自己和公司做的一些webpack优化。过程帮助我们分析的插件下载 webpack-bundle-analyzer 和 speed-measure-webpack-pluginnpm i webpack-bundle-analyzer speed-measure-webpack-pluginwebpack-bundle-analyzerwebpack-bundle-a

快速排查定位分析问题

最近看friday源码的时候，看到项目中很多依赖使用了公司cdn服务器获取，cdn的优势我们知道，但是项目在打包的时候不是会把所需的生产环境依赖打包进去嘛？原来webpack有个配置externals(帮助我们防止哪个包打进dist里面)。通常情况下我们不打包第三方包，因为第三方包太大，和bundle打包到一起会造成资源体积过大，所以我们还是通过script标签的方式把第三方资源引入到页面中，只需要通过以下配置即可，这里以jQuery为例。1、下载第三方包npm i jquery2、在页面中引入资

如今，webpack 毫无疑问是前端构建领域里最耀眼的一颗星，无论你前端走哪条路线，都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。这篇文章以 vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本为例。一、打包分析1.1、速度分析我们的目的是优化打包速度，那肯定需要一个速度分析插件，此时 speed-measure-webpack-plugin 就派上用场了。它的作用如下：分析整个打

/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出*/const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js',