Rails 6中的资产压缩，而Webpack无法正常工作 - 腾讯云开发者社区

这种说法很有争议，就像程序=算法+数据结构不能完全表达现今的软件工程一样, 说我们的工作就是堆砌工具，黏合业务, 一定程度上有自贬的意思。但这确实是大部分程序员的真实写照。...Rails 有一个重要的指导思想，即约定大于配置, 它为 Web 应用的大多数需求都提供了最好的解决方法，并且默认使用这些约定，而不是在长长的配置文件中设置每个细节。...没有用 Ruby/Rails 工作过, 默默写了个 Ruby China 小程序(微信搜Ruby CN)，算是感恩回馈社区吧 Ok, 忍不住吹了一波 Rails, 回到正题....扩展性强，通过插件扩展 wepack 配置弱, 强约定, 无法配置 webpack，可以 eject, 然后手工配置；支持 babel-macro;(严格说可以通过react-app-rewired...; 而 Service 层是多变的, 作为项目的局部依赖，不应该硬编码在 CLI 里面.

3.1K1 0

“技术邪教” Ruby on Rails 之父再出激进言论引争议

“根据一位 Twitter 前员工的说法，他们决定脱离 Rails 是因为之前的架构设计不好，于是他们决定转向当时认为更好的 Java 微服务这边。但很长一段时间过去，工作并没有什么进展。...DHH 还表示，这一年半以来，37 Signals 开始转向 propshaft，这个新库用于在 Rails 侧无需编译的前提下提供资产管道。...它的基本功能只有两个：为所有资产提供加载路径，以便在任意视图中访问任意位置上的 gem 及其他资产；提供摘要标记，从而确保拥有良好的远期动态缓存。...“我认为我们在 No Build、 import map 和大约 100 个单独的 JS 文件方面做得很好！我们发送 500kb 的未压缩 JS，而 Gmail 则发送 10mb！”...因为在 HTTP2 中，每个请求的开销仍然非常大，并且存在并发限制，此外还会出现瀑布流和低效压缩。目前，“打包” 对于高性能网站来说是无法绕过的。

2501 0

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

是的

没有找到

如何使用本地 Docker 更好地开发？我们总结了这八条经验

作者 | David Eisinger 译者 | 明知山策划 | 褚杏娟如果你像我们一样需要运行许多不同的应用程序，那么将开发环境容器化可以极大地提高工作效率。...请注意最后一点（“本地开发”）——如果你是为了部署而创建镜像，那么这些原则中的大多数都不适用。...我们的开发环境一般包括（通过 Docker Compose 编配）：应用程序（例如 Rails、Django 或 Phoenix）； JavaScript 监视器 / 编译器（例如 webpack-dev-server...举个例子，假设有个 Rails 应用程序使用一个共享的镜像来运行开发服务器和 webpack-dev-server，那么配置可能像这样： services: rails: image: appname_rails...:/app - yarn:/app/node_modules 这样，在 Rails 开发服务器完全启动并运行之前，webpack-dev-server 是不会启动的。

2K4 0

【第8期】webpack入门学习手记（二）

在这个过程中主要有以下几点体会： 1、无法坚持原创日更的囧境。因为我的写作动机是自己的学习笔记、工作笔记的整理。也就是说，我要有不断学习和工作的过程，然后将这个过程遇到的问题和解决方法记录整理下来。...这就需要强制性的养成一些习惯，并且压缩掉一些自己以前花时间做的事情。目前这几件事情做到。但是我无法处理掉临时性突发的事件，尤其是处理起来比较费时间的事情。...jQuery和Rails就是 MIT 协议。上面的添加scripts.start，其实是运行webpack,并且运行的配置文件是webpack.config.js。...如果依赖不存在，或者引入错误，应用程序无法正常执行。例如没有引用Lodash。如果依赖文件被引入了，但是没有使用，浏览器就会下载无用代码。如果我们使用webpack来管理JS呢？...看看情况如何~ 创建一个打包文件首先调整一下我们的工作目录。创建一个dist目录，用来存放压缩和优化之后的代码。而我们之前创建的src目录，用来存放原始代码。

4871 0

Webpack 性能系列二：多进程打包

缓存的本质是首轮计算后将结果保存下来，下次直接复用计算结果而跳过计算过程；并行的本质则是在同一时间内并发执行多个运算，提升单位时间计算效率，两者都是计算机科学常见的提升性能优化手段。...emitAsset 等接口，这会导致 style-loader 这一类 Loader 无法正常工作，解决方案是将这类组件放置在 thread-loader 之前，如 ['style-loader',...的实现非常简单，基本上就是在 Webpack 上套了个壳，核心逻辑：根据传入的配置项数量，调用 worker-farm 创建复数个工作进程工作进程内调用 Webpack 执行构建工作进程执行完毕后...例如需要对同一份代码同时打包出压缩和非压缩版本时，在 parallel-webpack 方案下，前置的资源加载、依赖解析、AST 分析等操作会被重复执行，仅仅最终阶段生成代码时有所差异。...生产环境下还可配合 terser-webpack-plugin 的并行压缩功能，提升整体效率。

1.3K2 0

webpack实战——生产环境配置【中】

1.1 原理工作原理：webpack对于工程源代码的每一步处理都有可能会改变代码的位置、结构、甚至是所处文件，因此每一步都需要生成对应的source map。...而在生产环境中，通常我们会对代码进行压缩，而最常见的压缩插件UglifyjsWebpackPlugin目前只支持source-map形式。...这样当打开浏览器开发者工具时，是无法看到map文件的，自然也就无法解析。如果我们自己想要追溯源码，可使用一些第三方服务，将map文件上传到第三方服务中。...另外的方案则是服务端配合处理，例如正常打包出source map，服务端通过服务器的nginx配置，将.map文件只对固定的白名单（如公司内网）开放，这样其余用户就无法获取到它们了，也不失为一个小妙招。...2.1 压缩JavaScript 压缩JS（JavaScript）的工具terser(optomization)在webpack中已集成（webpack4），并且支持ES6+的代码压缩，偏面向未来。

1.3K1 0

使用Capistrano，Nginx和Puma在Ubuntu 14.04上部署Rails应用程序

介绍 Rails是一个用Ruby编写的开源Web应用程序框架。Nginx是一种高性能HTTP服务器，反向代理和负载均衡器，以其并发性，稳定性，可伸缩性和低内存消耗而著称。...它通过在SSH上编写任意工作流脚本，可以将Web应用程序可靠地部署到任意数量的远程计算机，并自动执行预编译和重新启动Rails服务器等常见任务。...如果所有步骤都已正确完成，您现在应该能够在不输入密码的情况下您的clonegit存储库（通过SSH协议，而不是HTTP）： deploy@droplet:~$ git clone git@example.com...例如，将创建一个名为testapp_rails的目录。我们只是克隆以检查我们的部署密钥是否正常工作，每次推送新更改时我们都不需要克隆或拉取我们的存储库。...这会侦听端口80上的流量并将请求传递给您的Puma套接字，将nginx日志写入应用程序的“当前”版本，压缩所有资产并在浏览器中将其缓存到最大到期时间，在公共场合提供HTML页面文件夹作为静态文件，并设置默认的最大值

4.9K4 0

【学习图片】14.网站生成器、框架和内容管理系统

首先，你不一定能完全控制整个网站所使用的图片--网络上大多数面向用户的图片更多的是内容问题，而不是开发问题，它们由用户或编辑上传，而不是与JavaScript和样式表等开发资产一起存在于资源库中。...虽然上下文可能不同，但最终目标是相同的：根据开发团队定义的设置自动编码和压缩。幸运的是，你从本地开发工作流程中了解到的图像处理库可以在任何情况下使用。...，因为它无法知道图片在渲染的布局中的最终尺寸和位置，但它在生成你的标记时确实接受一个输入--这是RespImageLint的另一项工作。...框架客户端渲染框架将需要一个任务运行器或像Webpack这样的捆绑器来编辑、编码和压缩图像资产本身。例如，Responsive-loader也使用Sharp库来重新保存图像资产。...到此为止，你可能已经猜到了，使用尺寸属性的工作就有点麻烦了。

8792 0

前端工程化之Webpack优化

Webpack「打包阶段」提效以提升「当前任务」工作效率为目标的方案「压缩」 Chunk 产物代码以提升「后续环节」工作效率为目标的方案 Code SplittingTree ShakingScope...、压缩等，最终一起打包到指定的文件中plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是「解决 loader 无法实现的其他事」图片两者在运行时机上的区别...❝ 「如果我们配置到 plugins 属性中，那么这个插件在任何情况下都会工作,而配置到 minimizer 中，就只会在 minimize 特性开启时才工作」 --- optimization.minimize...Tree-shaking 自然也就可以正常工作了最新版本的 babel-loader 并不会导致 Tree-shaking 失效,确保babel-loader能使用Tree-shaking。...导致即使项目中开启了缓存设置，也无法享受缓存的便利性，反而因为需要写入缓存文件而浪费额外的时间如果需要使用缓存，则需要根据对应平台的规范，「将缓存设置到公共缓存目录下」❝ 缓存的便利性本质在于用磁盘空间换取构建时间

1K7 2

webpack教程：如何从头开始设置 webpack 5

什么是 webpack？现在，大多数网站不再只是单单的由原生JS+纯HTML编写的，还涉及一些浏览器无法理解的语言，如果项目大，文件多，对应的体积就大。...所以要压缩文件和翻译成所有浏览器都能理解的东西，这就是webpack的用武之地。...webpack 5也有一些内置的资产加载器。在我们的项目中，有一个HTML文件，该文件可以加载并引入一些 JS ，但实际上并没有执行任何操作。那么这个webpack配置要做的主要事情是什么？...现在Babel已经设置好了，但是我们的Babel插件还没有。可以在index.js中添加一些新的语法来证明它还不能正常工作。...Images 假设我们需要引用一张图片并直接导入到 JS 文件中，这样是无法正常工作的。为了演示，创建 src/ images 并向其中添加图像，然后尝试将其导入到index.js文件中。

2.2K1 0

Webpack 5新特性详解与性能优化实践

这样，当你的用户再次访问更新后的网站时，浏览器可以重用旧的缓存，而不是重新下载所有资源。// webpack.config.jsmodule.exports = { // ......[contenthash].chunk.js', // 配置资产的hash，确保长期缓存 assetModuleFilename: '[name]....明确导出：使用明确的导出（export const func = ...而非export default func）有助于Tree shaking更精确地工作。...g|gif|svg)$/i, type: 'asset/resource', // 自动处理资源 }, ], }, // ... };图片压缩和优化...：使用如image-webpack-loader等工具，在构建时自动压缩图片，减少文件体积。

1151 0

「使用 webpack 5 从0到1搭建React+TypeScript 项目环境」2. 集成 css、less 与 sass

1.2 生产环境在生产环境下，我们需要进行压缩CSS，以便在生产环境中节省加载时间，同时还可以将CSS文件抽离成一个单独的文件。...本插件基于 webpack 5 的新特性构建，并且需要webpack 5才能正常工作。之后将loader 与 plugin 添加到你的 webpack 配置文件中。...，里面是我们抽离出来的CSS文件，但我们却看到CSS文件并没有被压缩，为了压缩输出的CSS文件，我们需要css-minimizer-webpack-plugin这个插件来帮忙。...但是TypeScript 编译出现错误 “无法找到模块'.module.css'或对应的类型声明”错误，因为 TS 无法解析CSS modules 为了解决这个错误，我们需要创建一个src/typings.d.ts...类型声明文件并加入以下内容： declare module "*.module.css"; 之后重启应用，再次查看界面效果，就可以看见正常了：我们看到 CSS类名称被赋予了一个看起来很随机的名称

1.5K1 0

webpack的css压缩不兼容IOS8问题探索

webpack使用postcss的autoprefixer插件，并在压缩css时使用了cssnano，处理不当的情况下会导致压缩css后，部分兼容前缀（比如-webkit-）被删除的问题。...webpack1.x版本，UglifyJsPlugin这个插件开启了minimize，导致css-loader也开启了压缩，然后css-loader会使用cssnano进行压缩，而cssnano会使用到...less-loader'}, 而上述原因已经在webpack2.x修复，webpack2的UglifyJsPlugin插件去掉了强制开启minimize。...然而如果你不是使用的webpack1.x，通过排查发现，在css压缩插件未使用的时候，兼容前缀正常，一旦使用了OptimizeCssAssetsPlugin来压缩css就会丢失部分的webkit前缀。...// 避免 cssnano 重新计算 z-index safe: true, //cssnano通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作

1.3K4 0

18款Webpack插件，总会有你想要的！

Plugin是一个扩展器，它丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些分段，执行广泛的任务...run build，可以看到index.html中仅约会了index的js文件，而login.html中也仅约会了login的js文件。...true, //是否启用文件缓存 parallel: true //使用多进程并行运行来提高构建速度 }) 09、ParallelUglifyPlugin 开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成...Webpack4.0默认是使用terser-webpack-plugin该压缩插件，在此之前是使用uglifyjs-webpack-plugin，其中的区别是内置对ES6的压缩不是很好，同时我们可以打开...17、复制webpack插件我们在public/index.html中约会了静态资源，但是打包的时候webpack并不会帮我们拷贝到dist目录，因此copy-webpack-plugin就可以很好地帮我做拷贝的工作了

1.3K4 2

Webpack4 性能优化实践

本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。构建分析编译速度分析对 Webpack 构建速度进行优化的首要任务就是去知道哪些地方值得我们注意。...打包体积如下： [image] 如何优化缩小构建目标优化 resolve.modules 配置（减少模块搜索层级和不必要的编译工作）优化 resolve.extensions 配置增加缓存 const...hard-source-webpack-plugin 是 Webpack 的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行 Webpack 两次：第一次构建将花费正常的时间。...从 Webpack4 开始，默认情况下使用 terser 压缩生产环境下的输出结果。...Terser 是一款兼容 ES2015 + 的 JavaScript 压缩器。与 UglifyJS（许多项目的早期标准）相比，它是面向未来的选择。

1.1K0 0

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

“工程中没有被引用过的模块，这部分代码将永远无法被执行，称为“死代码”。那知道了什么是死代码，如何检测去除呢？在前面我们介绍过，ES6 module 依赖关系的构建是在代码编译时而非运行时。...基于这项特性webpack提供了tree shaking功能。这个功能便可以在打包过程中帮助我们检测没有被引用的模块，然后对这部分代码进行标记，并在资源压缩时将它们从最终的bundle中去掉。...打包时就会对bar()添加一个标记，在正常本地开发环境下它依然会存在，但是在生产环境压缩资源那一环节则会被移除掉。...原因是如果我们使用babel-loader来做依赖解析，那么webpack接收到的一般都是转化过的CommonJS形式的模块，那就无法对其进行tree shaking。...使用压缩工具去除死代码 tree shaking本身只是为死代码添加上标记，而真正意义上去除死代码则是通过压缩工具来进行的，而此工具之前介绍过：terser-webpack-plugin。

4252 0

vue 开发常用工具及配置六：认识各种 loader

目录 Webpack 的工作原理 loader 和 plugin 的区别 webpack 如何处理 css 文件三种样式 sass/scss 和 less 的区别另一种定义全局 less 变量的方法...源码 ---- Webpack 的工作原理默认 webpack 只能处理 js 文件，如果在 js 文件中导入了 css 代码： import '....plugin plugin 存在的目的在于解决 loader 无法实现的其他事，从打包优化和压缩，到重新定义环境变量，可以用来处理各种各样的任务。...webpack 如何处理 css 文件 webpack 中默认只能打包 .js 类型的文件，无法打包其他类型文件。如果要打包非.js类型文件，需要手动安装一些第三方 loader。.../style.css'")'; 先经过 css-loader 和 style-loader 的处理，这样css代码就能正常工作了。这种方式每次引入时都需要加上“style-loader!

2.6K3 0

React 测试驱动教程

设置 Webpack 本教程不是一个教如何使用 webpack，所以我不会详细说，但重要的是要了解基本的东西。 Webpack 就像 Rails 中的 Assets Pipeline 一样。...最后，我们可以运行 webpack，看看一切是否正常。如果你没有全局安装 webpack（npm i webpack -g），你也可以用 node modules 方式进行启动： ....我们还定义了 3000 端口，使得更像是 Rails 开发的体验。最后，在 webpack 配置文件中添加一个 resolve 标记，使进口文件看起来更直观。...babel-loader --save-dev loader: 'babel' } ], } } module.exports = config; 为确保一切工作正常...最终，我们需要设置 Karma，因此 npm script 会变得无效，但如果不设置，它将会正常工作。npm run test:watch 将会监视程序，并在文件发生修改时重新运行。多么高效！

4.6K2 0

前端工程化_知识点精讲

---- Webpack 生命周期 Webpack 工作流程中最核心的两个模块 Compiler Compilation 它们都扩展自 Tapable 类,用于实现工作流程中的生命周期划分,以便在不同的生命周期节点上注册和调用插件...❝「如果我们配置到 plugins 属性中，那么这个插件在任何情况下都会工作,而配置到 minimizer 中，就只会在 minimize 特性开启时才工作」 --- optimization.minimize...,需要解构模块对象中的 default」,先拿到导出成员，然后再正常使用这个导出成员。...Tree-shaking 自然也就可以正常工作了最新版本的 babel-loader 并不会导致 Tree-shaking 失效,确保babel-loader能使用Tree-shaking。...导致即使项目中开启了缓存设置，也无法享受缓存的便利性，反而因为需要写入缓存文件而浪费额外的时间如果需要使用缓存，则需要根据对应平台的规范，「将缓存设置到公共缓存目录下」 ❝缓存的便利性本质在于用磁盘空间换取构建时间

1.7K2 0

Taro编译打包优化实践

二、 Taro内置的Webpack配置我们知道Taro编译打包的工作是由webpack来完成的，既然想要优化打包速度，首先要知道Taro是如何调用webpack进行打包的，同时也要了解其内置的webpack...次之耗时严重的就是TerserPlugin，该插件主要进行压缩文件工作。而在loaders耗时统计中，babel-loader耗时两分半，sass-loader耗时两分钟，这两者耗时最为严重。...四、压缩资源文件微信开发者工具中，如果想要在真机上调试小程序，通常是需要进行二维码预览的。由于微信限制，打包出来的文件，主包、分包文件不能超过2M，否则进行二维码预览无法成功。...因此，我们的策略是在开发环境下配置webpack，调用terser-webpack-plugin进行压缩。同时配置插件参数，压缩指定文件，而不是全部压缩。...，可以发现已经减少至1.42M了，相对于此前的3.45M，压缩了50%左右，可以解决大部分无法进行二维码预览打包的场景了。

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

vue-cli

“技术邪教” Ruby on Rails 之父再出激进言论引争议

如何使用本地 Docker 更好地开发？我们总结了这八条经验

【第8期】webpack入门学习手记（二）

Webpack 性能系列二：多进程打包

webpack实战——生产环境配置【中】

使用Capistrano，Nginx和Puma在Ubuntu 14.04上部署Rails应用程序

【学习图片】14.网站生成器、框架和内容管理系统

前端工程化之Webpack优化

webpack教程：如何从头开始设置 webpack 5

Webpack 5新特性详解与性能优化实践

「使用 webpack 5 从0到1搭建React+TypeScript 项目环境」2. 集成 css、less 与 sass

webpack的css压缩不兼容IOS8问题探索

18款Webpack插件，总会有你想要的！

Webpack4 性能优化实践

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

vue 开发常用工具及配置六：认识各种 loader

React 测试驱动教程

前端工程化_知识点精讲

Taro编译打包优化实践

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐