Melody's Blog

different & persistence

2020-02-01-webpack-七

优化前端资源加载 3 - 进一步控制 JS 大小按需加载模块前面讲述了如何把大的代码文件进行拆分，抽离出多个页面共享的部分，但是当你的 Web 应用是单个页面，并且极其复杂的时候，你会发现有一些代码并不是每一个用户都需要用到的。你可能希望将这一部分代码抽离出去，仅当用户真正需要用到时才加载，这个时候就需要用到 webpack 提供的一个优化功能 —— 按需加载代码模块。在 webpac......

Posted by Meng on 2020-02-01

webpack

2020-02-01-webpack-六

优化前端资源加载 2 - 分离代码文件这一部分内容会稍微深入点，讲解如何利用浏览器的缓存以及在 webpack 中实现按需加载代码。分离代码文件关于分离 CSS 文件这个主题，之前在介绍如何搭建基本的前端开发环境时有提及，在 webpack 中使用 extract-text-webpack-plugin 插件即可。先简单解释一下为何要把 CSS 文件分离出来，而不是直接一起打包在 J......

Posted by Meng on 2020-02-01

webpack

2020-02-01-webpack-五

优化前端资源加载 1 - 图片加载优化和代码压缩前面我们已经提及如何使用 webpack 来满足不同环境的构建需求，其中在生产环境构建时会做额外的一些工作，例如代码压缩等我们总是希望浏览器在加载页面时用的时间越短越好，所以构建出来的文件应该越少越小越好，一来减少浏览器需要发起请求的数量，二来减少下载静态资源的时间。其实 webpack 把多个代码文件打包成几个必需的静态资源，已经很大程......

Posted by Meng on 2020-02-01

webpack

2020-02-01-webpack-四

用 HMR 提高开发效率配置使用 HMR HMR 是 webpack 提供的非常有用的一个功能，跟我们之前提到的一样，安装好 webpack-dev-server，添加一些简单的配置，即在 webpack 的配置文件中添加启用 HMR 需要的两个插件： 12345678910111213const webpack = require('webpack')module.exports = ......

Posted by Meng on 2020-02-01

webpack

2020-02-01-webpack-三

webpack 如何解析代码模块路径在 webpack 支持的前端代码模块化中，我们可以使用类似import * as m from './index.js' 来引用代码模块 index.js。引用第三方类库则是像这样：import React from 'react'。webpack 构建的时候，会解析依赖后，然后再去加载依赖的模块文件，那么 webpack 如何将上述编写的./ind......

Posted by Meng on 2020-02-01

webpack

2020-02-01-webpack-二

搭建基本的前端开发环境基本前端开发环境的需求列一下：构建我们发布需要的 HTML、CSS、JS 文使用 CSS 预处理器来编写样式处理和压缩图片使用 Babel 来支持 ES 新特性本地提供静态服务以方便开发调试上述几项应该可以满足比较简单的前端项目开发环境需求了，下面会一一介绍如何配置 webpack 来满足这些需求关联 HTML webpack 默认从作为入口的 ......

Posted by Meng on 2020-02-01

2020-02-01-webpack

webpack的基础使用 webpack 是一个 JS 代码模块化的打包工具，藉由它强大的扩展能力，随着社区的发展，逐渐成为一个功能完善的构建工具. ###安装和使用我们使用 npm 或者 yarn 来安装 webpack，可以作为一个全局的命令来使用： 123456npm install webpack webpack-cli -g # 或者yarn global add webpack......

Posted by Meng on 2020-02-01

webpack

[Hexo] Theme BeanTech

This is hexo theme doc.

Ported Theme of Hux Blog, Thank Huxpro for designing such a flawless theme. This BeanTech theme created by YuHsuan modified from the original Porter Kaijun Usage I publish the whole project f......

Posted by Meng on 2017-03-18

Hexo Blog