-
浏览器数据存储方式
前端浏览器数据存储方式有：Cookies、SessionStorage、LocalStorage、IndexedDB，这篇文章主要是比较这几种存储方式的区别，需要注意的是这些存储方式都受同源策略的约束，跨域是不能访问。CookiesCookies的出现并不是为了在浏览器里保存数据，而是为了保存HTTP状态的，因为HTTP协议是没有状态的，也就是服务器不知道用户上一次做了什么，有了Cookies，服务器可以设置或者读取Cookies中的信息，每次HTTP请求都会带上Cookies，从而可以维...…
-
markdown常用语法
这篇文章是介绍markdown 常用的一些语法。所有的字符都应该是英文字符，中文字符无效1 标题语法#【空格】标题名称# 表示 <h1>## 表示 <h2>### 表示 <h3>#### 表示 <h4>##### 表示 <h5>###### 表示 <h6>效果如下：一级标题二级标题三级标题四级标题五级标题六级标题2 一级标题 二级标题利用任一数量的等号（=）减号（-）一级标题===二级标题--效果如下：一级标题二级标题...…
-
webpack：优化打包CSS文件
在 webpack：如何解决浏览器缓存问题 文章里介绍了用chunkhash解决浏览器缓存问题，在那篇文章里默认把CSS文件一起打包进JS bundle文件中。但在一般项目里面CSS的改动比较少，如果打包成JS bundle文件，再结合chunkhash，每次发布以后，虽然CSS文件没有改动，但是客户端还是需要重新下载这些样式文件。如果CSS文件过大的话，在一定程度上会影响性能。接下来就介绍，如何在打包过程不把CSS 内联打包到JS bundle文件，而是直接提取生成单独的CSS文件，如果...…
-
webpack：如何解决浏览器缓存问题
在这篇文章里会介绍怎么在webpack中解决浏览器缓存问题。这篇文章是基于 webpack3.10.0默认打包的时候是直接把CSS inline到bundle文件里面缓存webpack打包以后的文件一般都是：app.bundle.js、vendor.bundle.js，每次发布以后，如果用户浏览器缓存没有过期，加上文件名字相同，浏览器不会从服务器下载最新文件，导致用户不能看到新发布的功能。这就是我们所说的浏览器缓存问题。解决方案就是，每次如果文件有改动，那么在发布的时候，就让对应bundl...…
-
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...…