用npm安装并生成jQuery文件后，无法使用vendor.js - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Vue加载优化，速度提高一倍。

可以看到，项目中vendor.js文件最大，为 184.9 KB，该文件是Vue打包的时候自动生成的；通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的，如果没有使用可以进行删除。...此外，把鼠标移到某个文件上面，还可以看到提示如果采用 gzip 压缩后的大小，比如vendor.js提示如果采用 gzip 进行压缩，压缩后的大小为61.26 KB，文件变小了，加载速度自然就快了嘛。...然而压缩转化之后的代码和源代码之间的差异很大，当出现问题的时候会造成无法 DEBUG的问题，而编译后的 .map 文件主要是我们用来进行错误定位的。...了解了.map文件作用之后，我们在本地开发测试的时候可以使用.map来进行调试，上生产了之后，bug基本修改完毕，所以在编译打包的时候可以不生成.map文件。...首先安装压缩插件，在项目根目录下执行如下命令安装： npm install --save-dev compression-webpack-plugin 然后把 config/index.js文件的「

1.7K2 0

Vue 网站首页加载优化

Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用，其他就是对接口优化等 1. vendor.js...gzip 最为擅长的是压缩纯文本文件，其效果非常明显，大约可以减少70％以上的文件大小，所以 Web 项目中开启 gzip 十分必要 3.2 nginx gzip如何配合vue使用事先用Vue生成的...nginx，如何添加模块，和添加第三方模块安装完http_gzip_static_module模块后，使用 nginx -V 命令查看是否模块加载成功 3.4 nginx gzip 详细配置打开nginx...表示使用已经压缩好的gz文件，根据请求配合vue生成的gz文件 gzip_min_length 1k; gzip_http_version 1.1; gzip_types...vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用，其他就是对接口优化等。

2K2 2

您找到你想要的搜索结果了吗？

是的

没有找到

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖 // 初始化包 npm init -y // 安装依赖 npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件

3.7K2 0

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...，因此需通过 html-webpack-plugin 插件打包 html 文件npm i html-webpack-plugin -D安装后在 webpack.config.js 配置文件中let HtmlWebpackPlugin...html 文件安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可npm i mini-css-extract-plugin...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件 DefinePlugin

1.4K1 0

Webpack最佳实践指南

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...，因此需通过 html-webpack-plugin 插件打包 html 文件npm i html-webpack-plugin -D安装后在 webpack.config.js 配置文件中let HtmlWebpackPlugin...html 文件安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可npm i mini-css-extract-plugin...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件 DefinePlugin

1.5K2 0

Webpack最佳实践

webpack 安装新建一个目录，进入目录初始化 package.json，并安装 webpack 依赖// 初始化包npm init -y// 安装依赖npm i webpack webpack-cli...配置后可使用 webpack 命令尝试打包，若报错找不到命令可 npm i webpack -g 全局安装后再打包，打包成功后会输出到项目根目录下的 dist 目录。...，因此需通过 html-webpack-plugin 插件打包 html 文件npm i html-webpack-plugin -D安装后在 webpack.config.js 配置文件中let HtmlWebpackPlugin...html 文件安装依赖，若使用的是 sass，则把 less less-loader 换成 node-sass sass-loader 即可npm i mini-css-extract-plugin...可以使用正则排除像 node_modules 如此庞大的文件夹配置后在命令窗口输入 npm run build 就可以进行监控并实时打包了，如图实时打包了一次环境变量通过 webpack 内置插件 DefinePlugin

1.5K3 0

npm包管理器基本使用

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。...由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。...初始化输入npm init -y 然后后它会在目录生成在package.json中，存储着你安装的包的信息（比如版本等）安装包接着我们安装jquery包输入npm install jquery...它会自动安装jquery（默认为最新版本）,也许你需要别的版本的jquery，那么你需要输入npm install jquery@版本号回车后会自动安装，生成一个名为node_modules的文件，...引用包文件目录：node_moudles>>>dist>>>你想要的文件前面提到，安装了jquery包生成node_modules的文件夹，在这个文件夹下，我们可以看到jquery这个文件夹，打开后可以看到

7861 0

(1724) webpack实战技巧：生产环境和开发环境并行设置,实现来回切换

2. npm安装方式对比假如我们要在项目中使用jquery库。...采用（2.1~2.3三种方式） 2.1 全局安装 npm install jquery 或者 npm install jquery -g 安装完成后，会发现在package.json中并不存在这个包的依赖...使用这种安装方式我们可以直接在命令行里使用。当我们把项目拷贝给别人继续开发，或者别人把我们发布到的git上代码clone下来，使用npm install安装相关包时就会缺少这个jquery包。...项目就会无法正常运行，所以这也是我们最不赞成的安装方法。...2.2 安装到生成环境安装指令为： npm install jquery --save 它存在于package.json的dependencies中，它是生产环境需要依赖的包（上线时需要的依赖包）。

9722 0

webpack

源代码目录新建 src/index.html 首页和 src/index.js 文件初始化首页基本的结构运行 npm install jquery -S命令，安装 jQuery,其中-S 是–...run执行，如npm run dev 执行 npm run dev命令，启动 webpack 进行项目的打包构建更换使用的 js 文件为新生成的 js 文件 <script src=".....原因：开发环境下，打包生成的文件存在于内存中，无法获取到最终生成的文件开发环境下，打包生成的文件不会出现代码压缩和性能优化配置 webpack 的打包发布在 package.json 文件的 script...会覆盖webpack.config.js中的model选项 } 执行 npm run dev 命令后，会发现生成的 js 文件、图片文件（只有 base64 格式的图片会生成）和 index.html...当程序出错时，可以直接在控制台显示错误行的位置，并定位到具体的源代码。默认生成的 Source Map 记录的是生成后的代码的位置，会导致报错时的行数与源代码的行数不一致。

2.1K3 0

webpack配置React开发环境(上)

安装 Webpack：npm install -g webpack。 Webpack 使用一个名为 webpack.config.js 的配置文件。...CSS，然后使用CSS-loader预处理CSS文件。...css-loader' }, ] } }; 注意，你必须使用两个加载器来转换CSS文件。...首先是CSS-loader读取CSS文件，另一个是Style-loader将Style标签插入HTML页面。不同的装载器通过感叹号（！）链接。启动服务器后，index.html将具有内部样式表。...启动服务器后，small.png和big.png将有以下URL。

2K13 0

Vue首屏加载速度优化，提升80%以上

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。...若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。...首先安装webpack的可视化资源分析工具，命令行执行： npm i webpack-bundle-analyzer -D复制代码 2...., 并使用optimize-css-assets-webpack-plugin来压缩CSS文件。...详细见vue官网最终优化后的效果如下图：vendor.js文件从1M以上优化到256K左右，体积减少接近80%，排除服务器影响的因素，界面渲染速度基本都在1s左右，达到秒开效果，比之前快

2K2 0

npm bower安装和使用

http://www.jianshu.com/p/d9e46b5a8f80 npm 在windows 普通的bush 安装很慢应该在 git下安装才会很快的注：bower下载安装依赖库实际上是使用git...Git setup 2，之后就可以用npm包管理工具下载并全局安装bower: >npm install -g bower 全局安装bower 后，可以查看Bower的帮助信息，使用命令：...>bower help 3，初始化当前工程的bower，此操作会在当前目录下生成bower.json文件： >bower init ---- bower的使用使用了bower的项目都会在目录下有一个...在该文件同级目录下，使用如下命令即可安装相关依赖库。...除了用包名安装，也可以指定git地址，进行安装，如bower install https://github.com/jquery/jquery。

3K1 0

Webpack的异步加载原理及分包策略(深度好文，建议收藏)

举个例子需求：main.js 依赖两个 js 文件：A.js 是点击 aBtn 按钮后，才执行的逻辑，B.js 是点击 bBtn 按钮后，才执行的逻辑。...webpackJsonp.push 的的值，两个参数分别为异步加载的文件中存放的需要安装的模块对应的 id 和异步加载的文件中存放的需要安装的模块列表。在满足某种情况下，会执行具体模块中的代码。...我们先用 webpack-bundle-analyzer 分析打包后的模块依赖及文件大小，确定优化的方向在哪。 ? 然后我们再看下打包出来的 js 文件 ?...看到这两张图的时候，我内心是崩溃的，槽点如下打包后生成多个将近 1M 的 js 文件，其中不乏 vendor.js 首页必须加载的大文件 xlsx.js 这样的插件没必要使用，导出 excel 更好的方法应该是后端返回文件流格式给前端处理...npm 依赖包 npm uninstall vue iview echarts xlsx --save 此时我们在来看一下打包后的情况 ?

5K3 1

愿未来没有 Webpack

用 @pika/web 安装的 npm 包可以直接在浏览器中运行。这样的话你还需要一个打包工具（bundler）吗？ ? 现在是 1941 年。你的名字是 Richard Hubbell。...用 @pika/web 安装的现代 npm 依赖可以直接在浏览器中运行，即使这些依赖包本身也有它们自己的依赖包。一步搞定。它不是一个构建工具，也不是一个（传统意义的）打包工具。...安装后的依赖包之所以能够在浏览器中运行，是因为 @pika/web 把每个包打包成了一个单独的、Web 环境能够支持的 ESM 模块 .js 文件。...当你把所有依赖包打包成一个庞大的 vendor.js 文件，每当更新一个依赖，你就不得不迫使用户重新下载整个 vendor.js。...用现代 ESM 语法写代码，用 @pika/web 安装可以直接在 Web 环境运行的 npm 依赖包。不需要什么工具。你可以随时添加工具。

7642 0

重构谷粒商城12：npm快速入门

4、npm的基本使用使用npm在项目中安装jquery，很简单、清爽。不过，现在安装有点慢，我们需要搞个国内镜像先。成功后，下载起飞咯。下图总结了npm常用的命令。...生成package.json后，执行npm install xx ，会生成package-lock.json，这是基于package.json生成的。这个文件我们后面再做讲解。...提交代码时必须提交package-lock.json,否则无法保证一致性。6、NPM安装的包使用所以，下篇文章我肯定还是需要给大家介绍下webpack打包工具的。...好了，言归正传，讲讲没有webpack时咱怎么用npm安装的包。第一种方法。手动在代码中导入。在html中定位路径引用包中文件，这么用和没有npm前也没有啥区别，太麻烦了。方法二，稍微简单一点。...保存后，使用npm build下。在lib下就会自动生成浏览器兼容的代码了。8、npm竞品：yarn的安装和使用不过npm5以后就修复了bug啦使用起来，轻轻松松。下篇文章将介绍webpack。

3021 0

Webpack入门

首先运行npm init，生成package.json文件。...插件后，运行时会报错，所以建议本地安装。...添加多个模块假设这个项目需要用到jQuery，打开命令行工具，安装它： npm install jquery -save 这会在webpack-tutorial目录下生成一个node_modules文件夹...，通过npm安装的的模块都会在这个文件夹下。...如此一来，我们希望将css文件生成到dist/css文件夹中，再通过传统的方式用link标签进行引用，而不是生成到list.js脚本中。

2K2 0

webpack（4.8.3）总结

参数代替二、安装 1、全局安装：npm install --save webpack webpack-cli 2、局部安装：即进入项目目录安装webpack、webpack-cli（推荐），如全局安装...，因版本不同，不便于维护 3、使用npm init初始化package.json(需要在webpack及webpack-cli安装后在初始化package.json,否则会报错) 项目目录结构如下(.idea...为输出文件，即打包生成的文件所放置的目录例： webpack '....//如需生成多个html页面，则new HtmlWebpackPlugin()多个 //如使用jade/pug等html模版，则需要安装对应的loader，并在module.rules新增解析规则...7、第三方JS库的引入,以下讲述种种不同引入库的方法方法一、使用npm包安装的库，如npm I jquery 在插件配置中新增一个webpack自带的插件 Plugins:[ //使用以下

9624 0

webpack（4.8.3）总结之一

参数代替二、安装 1、全局安装：npm install --save webpack webpack-cli 2、局部安装：即进入项目目录安装webpack、webpack-cli（推荐），如全局安装...，因版本不同，不便于维护 3、使用npm init初始化package.json(需要在webpack及webpack-cli安装后在初始化package.json,否则会报错) 4、根目录下创建webpack.config.js...为输出文件，即打包生成的文件所放置的目录例： webpack '....//如需生成多个html页面，则new HtmlWebpackPlugin()多个 //如使用jade/pug等html模版，则需要安装对应的loader，并在module.rules新增解析规则...7、第三方JS库的引入,以下讲述种种不同引入库的方法方法一、使用npm包安装的库，如npm I jquery 在插件配置中新增一个webpack自带的插件 Plugins:[ //使用以下

1.1K4 0

webpack实战——打包优化【中】

当一段相同的子程序被多个程序调用时，为了减少内存消耗，可以将这段子程序存储为一个可执行文件，当被多个程序调用时只在内存中生成和使用同一个实例。...不过区别还是有的，DLLPlugin实际生成的文件是JS文件而不是动态链接库。在打包vendor的时候还会附加生成一份vendor的模块清单，这份清单将会在工程业务模块打包时起到链接和索引的作用。..."dll": "webpack --config webpack.vendor.config.js" } } 然后执行npm run dll，会发现生成了一个dll目录，里面对应有两个文件： vendor.js...vendor.js"> 设置完毕后，当页面执行到vendor.js...现假设我们工程目录中有如下资源文件，并每个资源都加上了chunk hash： vendor@[hasn].js pageUser@[hasn].js pageIndex@[hasn].js util@[

1.1K5 0

在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

2、使用 npm 安装包　　这篇文章的示例项目，我采用的是 ASP.NET Core 2.2 默认生成的 MVC 项目，因为在写文章的过程中有过更换解决方案，所以文章中的截图可能会出现名称前后不对应的情况...可以看到，安装完成后，npm 提示我们 bootstrap 依赖于 jquery 和 popper.js，所以这里我们手动添加上这两个依赖的组件。　　...当我们安装 jquery 的 1.9.1 版本后，因为之前的 jquery 版本存在一些安全隐患，所以 npm 会提示我们执行 npm audit 命令来查看当前项目中可能存在的安全隐患，以及对于如何解决这些隐患的建议...latest：始终安装包的最新版本。　　3、gulp 配置当我们通过 npm 添加好需要使用的组件包后，就需要考虑如何在项目中使用。　　...js 压缩到一个 js 文件后的路径 //使用 npm 下载的前端组件包 const libs = [ { name: "jquery", dist: ".

2.5K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭