-
webpack(3):代码切割
在上一篇文章【webpack:打包后的bundle文件里到底有什么 】这篇文章解释了什么是bundle文件以及bundle文件里的具体内容。也提到过单单只是有多少个入口文件,打包出多少个bundle文件这种方式,会导致代码冗余,同一模块代码会被重复打包到不同的bundle文件中。为了解决这个问题,我们需要把重复共用代码提取出来,放在单独的文件中,其他bundle有引用公用代码只需要加载这个单独文件就可以了。提取入口文件中公用的代码,这种行为就是代码切割,生成的独立文件就是chunk文件。下...…
-
webpack:打包后的bundle文件里到底有什么
webpack把 ts js html css imgs等文件都统统打包成bundle.js文件,只知道所有静态文件都在bundle文件里,但是具体bundle里面有什么呢?一个文件:a.js,一个入口文件,生成一个bundle文件源码在这里:angular-seed-project.// a.jsconsole.log('this is a.js file');// webpack.bundle.jsmodule.exports = { entry: { 'a': '...…
-
Angular:lazy loading和preloading
在这篇文章中会介绍以下内容: 什么是 lazy loading 和 preloading 如何在 angular 项目中实现 lazy loading 如何在 angular 项目中实现 preloading 如何在 angular 项目中结合使用 preloading 和 lazy loading lazy loading和preloading在打开浏览器访问某一个网站的时候,要从服务器下载 bundle/chunk 等文件。如果文件...…
-
Angular:如何用Angular(<6.0)和Webpack搭建项目
angular-cli按照Angular官方教程搭建一个 Angular 项目,默认都是先安装 angula-cli,再用命令行ng new angular-project-name会自动生成一个符合 angular best practice 的项目, 如下所示:源码可以在 angular-seed-project 查看。本文中的示例代码用的 angular-cli 的版本是 1.6.0,angular 是5.0.0然后直接跑ng serve就把项目跑起来了,用 angluar-cli ...…
-
如何配置chrome和VS Code调试前端代码
最开始用 Angular5 的时候,开发工具用的是 VS code,不知道要怎么用 chrome 调试 typescript 的代码,看了 VS Code 官方文档,才知道具体配置方案。这篇文章就是教你怎么结合 chrome 浏览器和 VS Code 调试前端代码,主要介绍从 VS Code 里 launch chrome 浏览器,并且在 VS Code 里设置断点,然后在 chrome 操作网页从而 hit 断点进行调试。关于更多调试方法,比如 attach DevTools 到浏览器 ...…
-
如何在webpack build结束后移动dist里的文件
在 印度人代码 这篇文章中有提到需要在每次webpack build的时候需要每次都动态的去替换MVC中的index.cshtml文件。为什么要替换index.html文件在现有的这个框架里,每次webpack打包生成的bunlde文件都是 app.bunlde.js / vendor.bundle.js / polyfills.bunlde.js,这个会有 缓存问题。为了解决缓存问题,每次如果对应的bundle文件里面有代码改动,利用webpack contenthash 会生成唯一的h...…
-
webpack:分析和优化webpack bundle文件
在用 webpack 打包的过程当中,曾经把 webpack 官方文档看了不下十遍,对于最终 bundle 文件里具体到底有什么或者某个特定的 module 到底被放到哪一个 bundle 文件里,始终都是一头雾水。特别是代码切割这一块,看了那么多遍,并且 google 了各类大神对这一块的解释,还是一头雾水。直到我发现 webpack-bundle-analyzer 这个小插件,把它 install 到本地项目里跑起来,一下子就彻底明白了。今天这篇文章就是给大家介绍 webpack-bu...…