正文
原文出处
🚀 Nuxt 2 is coming! Oh yeah! – Nuxt.js – Medium
1.4.0发布后仅仅25天，就又迎来了Nuxt2。超过330次提交，320次更改文件，8,200次添加和7,000次删除，不包括其他nuxt repositories！好吧，似乎很多变化，但不用担心，我们尽最大努力只有少量突破性变化，并关注稳定性，性能和更好的开发体验。我们对这些变化进行了总结：
![]()
🏎 Webpack 4 (Legato)
仅这个改进就值得一篇专门的文章。有什么新特性呢？
-
🏎 Webpack 4, is FAST!
-
😍 Mode, #0CJS, and sensible defaults
-
✂ Goodbye CommonsChunkPlugin
-
🔬WebAssembly Support
-
🐐 Module Type’s Introduced + .mjs support
想了解更多信息请看
Sean T. Larkin
的
这篇文章
以及Webpack
Release Notes
.
其他改进:
-
Default dev tool for client bundle is the webpack default
eval
which is the fastest option.
-
Module Concatenation (Scope Hoisting) optimization is enabled by default.
-
删除了实验属性
build.dll
。它不稳定，而webpack 4速度已经足够快。
💡
迁移提示:
好消息是，您不需要更改项目中的任何代码。只要升级到Nuxt 2，所有东西都会立刻迁移。
👋 弃掉了venders
我们一直使用
vendors
chunk，但是它将被自动处理并且效率更高。这次发布后，我们不再使用CommonsChunkPlugin，所以我们不必明确指定
vendors
。Nuxt自动添加了核心的packages(包括vue,vue-router,babel-runtime...)到
Cache Group
中。这使得webpack可以用最合理的方式拆分你的代码。
💡
迁移提示:
如果你在项目中的
nuxt.config.js
中配置了
vendors
，直接去掉即可。 如果你是一个module author,你可以继续使用
this.addVendor()
，但我们可能会有弃用提示。
✂️ chunk splitting的完全控制
以前，Nuxt被选择用于代码分割。尽管Nuxt试图提供可能的最有效的分割，但您现在可以使用
build.splitChunks
选项完全控制它，并且可以选择禁用每个路径的异步块。
⚠️
BREAKING CHANGE:
nuxt默认不再拆分layout chunks，他们将被加载进主入口像nuxt core, plugins, middleware和store。你也可以通过
build.splitChunks.layouts: true
使得layout拆分。另外为了更好的控制
webpack
块分割，你可以使用
build.optimization.splitChunks
选项。
⚠️
BREAKING CHANGE:
对于生产环境，我们不再使用文件名作为 chunk names 的一部分(
/_nuxt/pages/foo/bar.[hash].js
变成
[hash.js]
)这样可以帮你发现工程内部的漏洞。你可以可以使用
build.optimization.splitChunks.name: true
强制开启。 (如果未指定，名称仍然在
dev
和
--analyze
模式下启用)
⚠️
BREAKING CHANGE:
webpack默认不会拆分runtime（manifest）chunk，以减少异步请求而是将其移入main chunk。你可以使用
build.optimization.runtimeChunk: true
启用。
⚠️
注意:
Nuxt的默认设置基于最佳实践，并在与实际项目应用之后进行了优化。建议阅读
Tobias Koppers
写的
RIP CommonsChunkPlugin
并在每次更改之后使用
nuxt build --analyze
.
💡
迁移提示:
保持默认值。根据您的需求对您的实际项目进行基准测试并根据需要定制选项。
🔥 Vue Loader 15 and mini-css-extract-plugin
如果您没有听过
vue-loader
, 其实他就是把
.vue
文件解析为可运行的JS/CSS and HTMl。Vue-Loader 15进行了完全的重写，它使用了一种完全不同的新架构，能够将webpack配置中定义的任何规则应用于
* .vue
文件内。
对于CSS抽取，我们使用一个新的插件
mini-css-extract-plugin
，它支持CSS和SourceMaps（CSS splitting）的按需加载，并构建在新的webpack v4特性（module types）上。
两者都是新的，所以在我们最终的2.0.0版本发布之前，预计会有一些不一致。 （顺便说一句，我们已经完全测试了不同场景下的两个插件，并且它们工作起来很有魅力）
Nuxt 💖 ES modules
现在你可以在
nuxt.config.js
中使用
import
and
export
, 服务器middleware和modules要感谢
std/esm
. A fast, production ready, zero-dependency package to enable ES modules in Node
6+ by
John-David Dalton
.
🖥️ CLI 改善
我们非常感谢开发人员，并相信他们需要优雅的开发经验才能创造美好的事物，所以我们重写了很多关于CLI的东西。
在使用
nuxt dev
时, 即使CLI显示Nuxt准备就绪，您也可能感觉到构建延迟。这是因为webpack运行两次。一次用于客户端，一次用于SSR捆绑。第二个是隐藏的！因此，我们将构建平行并创建
WebpackBar
，开发更愉快。
现在，所有debug信息都默认隐藏（可以使用
DEBUG=nuxt:*
环境变量启用），相反，我们会为builder和generator展示更好的信息。
Nuxt经常要求的增强功能支持Test and CI（持续集成）环境。 Nuxt 2自动检测配置项和测试环境，并将切换到一个称为minimalCLI的特殊模式，其中包含更少的详细消息。
🤷 Nuxt 1.0中删除的功能
-
Removed
context.isServer
and
context.isClient
(Use
process.client
and
process.server
)
-
Removed
options.dev
in
build.extend()
(Use
options.isDev
)
-
Removed tappable hooks (
nuxt.plugin()
) in modules (Use new hooks system)
-
Removed callback for modules (Use
async
or return a
Promise
)
🎌 Experimental Multi-Thread Compiler
While this is going to be an official feature of webpack 5, you can use experimental
options.build.cache: true
to enable
cache-loader
and babel cache and
options.build.parallel: true
to enable
thread-loader
.
