Melody's Blog
different & persistence
Toggle navigation
Melody's Blog
Home
Archives
About
Tags
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
FEATURED TAGS
webpack
ABOUT ME
Hi, i'm melody
RECENT POSTS
2020-02-01-webpack-七
2020-02-01-webpack-六
2020-02-01-webpack-五
2020-02-01-webpack-四
2020-02-01-webpack-三
FRIENDS
Bean Tech
Kaijun's Blog
Hux Blog
It Helps SEO