webpack
红孩儿2011
这个作者很懒,什么都没留下…
展开
-
webpack splitChunks
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const isProductionPhase = process.env.NODE_ENV === "production";module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === "production") { // 为生产环境修改原创 2020-09-18 18:31:42 · 215 阅读 · 0 评论 -
webpack学习笔记——优化部分(optimization.splitChunks)
optimization.splitChunkscacheGroups个人感觉splitChunks中除了cacheGroup之外的配置是用来作代码分割的,而cacheGroup是作为模块合并的配置项。cacheGroup内配置优先级高于外面配置,可以理解为先进行分割再进行合并,分割的代码放到哪个缓存组的块中,由优先级决定。可进行如下配置:splitChunks:{ cacheGroups: { common:{ chunks: 'initial',原创 2020-09-18 17:52:49 · 3746 阅读 · 0 评论 -
【前端优化】加载时间久
一、减少请求次数,看同一个页面有没有重复调用的接口二、图片压缩,或者做成网图也可以减小包的体积三、插件按需引入四、CDN加速将打包后的资源放到CDN,index页面引用CDN的资源main.js 设置 webpack_public_path = window.staticResourceURLPrefix || “/”;window.staticResourceURLPrefix在index页面上赋值...原创 2020-09-15 14:57:10 · 681 阅读 · 0 评论 -
【前端优化】前端项目打包后生成的文件过大优化
方法1:使用插件:compression-webpack-plugin// 1安装npm install --save-dev compression-webpack-pluginconst path = require('path');const webpack = require('webpack')const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExten原创 2020-09-15 14:10:24 · 2383 阅读 · 0 评论 -
webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结为什么是webpackwebpack一下自己就????了,这绝对是一个重要的原因。然后我之前项目中都是通过requireJS,通过AMD来做到模块化开发。webpak不仅支持打包,而且支持AMD 和 CommonJS 方式来做模块化开发,所以打算尝试一下webpack来实现模块化。我的需求简单,适合新上手webpack,只需要生成上线原创 2020-09-10 12:49:20 · 852 阅读 · 0 评论 -
terser-webpack-plugin
webpack打包时自动去除console.log——terser/terser-webpack-pluginterser由于老牌工具uglify不支持es6,且uglify-es不再更新,我们选择terser作为js代码压缩工具。# 全局安装terser命令行工具npm install -g terser# 使用terserterser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js# -c即compress表示原创 2020-09-10 12:30:35 · 17020 阅读 · 0 评论 -
webpack之loader
作用loader是一种打包的方案,webpack默认只识别js结尾的文件,当遇到其他格式的文件后,webpack并不知道如何去处理。此时,我们可以定义一种规则,告诉webpack当他遇到某种格式的文件后,去求助于相应的loader。npm install file-loader -Dwebpack.config.jsconst path = require('path');module.exports = { // 模式:可选为:development, 默认为:production原创 2020-09-08 16:11:31 · 103 阅读 · 0 评论 -
webpack 公共路径设置的全局变量 __webpack_public_path__
webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。在构建项目时设置路径值开发模式中,我们通常有一个 assets/ 文件夹,它往往存放在和首页一个级别的目录下。这样是挺方便;但是如果在生产环境下,你想把这些静态文件统一使用CDN加载,那该怎么办?想要解决这个问题,你可以使用有着悠久历史的环境变量。比如说,我们设置了一个名为 ASSET_PATH 的变量:import webpack from 'webpack';/原创 2020-08-21 17:30:21 · 6673 阅读 · 0 评论