I've got an existing code base in which Vue.js has performance problems. I also see this notice in the browser console:
so I guess an easy fix could be to put Vue into production mode.
In the suggested link I try to follow the instructions for webpack. We're on Webpack version 2.7 (current stable version is 4.20). In the instructions it says that in Webpack 3 and earlier, you’ll need to use DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}
So in my package.json I've got a build script defined:
To build for production I run yarn run build and it runs a build.js file (paste here) which in turn calls webpack.base.conf.js (paste here) and webpack.prod.conf.js (paste here).
As you can see in the paste I use the DefinePlugin as suggested by the docs.
I also found a file called vue-loader.conf.js (paste here) and to be sure I also added the DefinePlugin in there as well.
I can run yarn run build which ends without errors, but when serve the site over Apache and open the browser it still shows the notification that we're in development mode.
To be sure it actually uses the files created by webpack I completely removed the folder /public/webpack/ and checked that the webinterface didn't load correctly without the missing files and then built again to see if it loaded correctly after the command finished. So it does actually use the files built by this webpack process. But Vue is actually not created in production mode.
What am I doing wrong here?
The problem may be in your 'webpack.base.conf.js' as i suspected, thank you for sharing it, upon searching i've found an issue resolving your 'production not being detected' problem on github here
The solution requires that you change 'vue$': 'vue/dist/vue' to 'vue$': vue/dist/vue.min in production.
You will find the original answer as:
#ozee31 This alias 'vue$': 'vue/dist/vue' cause the problem, use vue/dist/vue.min in production environment.
Related
I make a vue project using this documentation: https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And I wanted to added tailwind css to this project. So I used this guide (from point 2 Install Tailwind CSS): https://tailwindcss.com/docs/guides/vite#vue
But, I see no changes and get this warning:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
I followed the instuction as it is.
I tried following the content-configuration and I double checked it to see all files in place.
I was expecting tailwind.config.cjs file should be generated but instead tailwind.config.js is generated.
Updates:
On repeating all the steps using this link: https://tailwindcss.com/docs/guides/vite#vue
At step 4:
Add the Tailwind directives to your CSS, When I replace the content for style.css as asked in the step.. Exactly after this point, the error is shown.
Fixed.. Asking in the discord community this was the response:
Thank you for supplying a remotely-hosted repository. It seems to work
fine for me, it could be that you're suffering from a bug that this PR
solves: https://github.com/tailwindlabs/tailwindcss/pull/9650. You
could temporarily try insiders version and see if that fixes it for
you
npm install tailwindcss#insiders
I just gave solution to the same problem. You might have the same...
I had my tailwind.config.js like this:
module.exports = {
content: ["./src**/**/*.{html,js}"],
},
...and I changed the destination folder from "src" to "public", and it worked for me.
Like this:
module.exports = {
content: ["./public/**/*.{html,js}"],
},
Hope this will help you. Good luck and happy coding !
I am attempting to get the volar vue language server to work in place of vetur for neovim's native lsp.
Using both lspconfig and lspinstall I was able to create a working custom install for sumneko_lua (unrelated but had to manually build due to some issues with the built-in :LspInstall lua). Below is that code duplicated and modified for an attempt at using this new vue server:
local vue_config = require'lspinstall/util'.extract_config('vuels')
vue_config.default_config.cmd = {'node', './node_modules/vscode-vue-languageservice/out/index.js', '--stdio'}
require'lspinstall/servers'.newvue = vim.tbl_extend('error', vue_config, {
install_script = [[
! test -f package.json && npm init -y --scope=lspinstall || true
npm install vscode-vue-languageservice#latest
]],
uninstall_script = nil
})
Running :LspInstall newvue installs properly, however :LspInfo shows this language server is attached to the buffer (of a .vue file) but not active. I believe the issue is with this path: ./node_modules/vscode-vue-languageservice/out/index.js. It exists, but may not be the correct entry point? The default vue ls simply has vls as the command because it provides a binary. Am I missing something in this package? I have yet to come across another language server without a single binary to pick out.
Thanks!
Can you try an absolute path to the out.js file? In my pretty elaborate config for a custom Volar install I'm using something just /home/myuser/dev/volar/packages/server/out/index.js (where the volar folder is just the whole volar cloned github repo). My full config is here
I don't think you can use relative paths like you did. I know you're assuming that the "./node_modules" means "workspace directory" but it's hard to tell in which directory nvim-lspconfig opens up those executables.
I have yet to come across another language server without a single binary to pick out.
Volar also provides a binary, it's volar-server (after running npm i -g #volar/server), it's just with a custom install (ie. alongside the real volar) you can't use it, because I assume you want to use your local install with custom code.
As for more indepth debugging/logging, you can check ~/.cache/nvim/lsp.log to see why the language server dies in detail.
Summary:
I have created projects, with Vue.js and Nuxt.js, where I have installed aws-amplify (which automatically installs aws-sdk) in order that I can implement authentication with AWS Cognito.
In both cases, this works very nicely, but the problems come when I build production versions.
In both cases, I end up with massive bundle sizes which (thanks to webpack-bundle-analyzer) I can immediately see are caused by the aws-sdk which appears to contain code to implement every AWS service, under the sun, despite the fact that I am only importing AWS Cognito's: "Auth" (import { Auth } from 'aws-amplify')
I have tried creating a custom AWS SDK for JavaScript, which only includes the service: AWS.CognitoIdentity, but despite incorporating that (presumably incorrectly), I still end up with the same bundle size (and aws-sdk files) when I build the projects.
As I say, this is happening in both Nuxt and Vue project, but in order to simplify this, I for now just want to find the solution to a very basic sample project created with Vue.
I think I must be doing something dumb, but I can't work out what that is.
Any help would be greatly appreciated! :-)
Steps to reproduce:
Create a basic Vue.js project with defaults. Run: vue create vue-aws-sdk-inv
[Note: Steps 2 - 4, are not crucial to reproduce issue, but install webpack-bundle-analyzer which provides useful extra info.]
In the new project, install webpack-bundle-analyzer. Run: npm install --save-dev webpack-bundle-analyzer
Create root file: vue.config.js
Add the following code to vue.config.js:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
As a benchmark, build the project. Run: npm run build
At this stage, the project will build (with no console warnings) and webpack-bundle-analyzer will launch (in the browser) showing the file: chunk-vendors..js, at the top of the tree, containing a bunch of other .js files, all of acceptable size.
Install AWS Amplify (and by default aws-sdk). Run: npm i aws-amplify
Open src/components/HelloWorld.vue and add the following under the tag: import { Auth } from "aws-amplify";
Build the project. Run: npm run build
At this stage, the project will build WITH console warnings regarding the following files being too large:
File Size Gzipped
dist/js/chunk-vendors.013ac3f0.js 3055.78 KiB 550.49 KiB
dist/js/app.fa2a21c4.js 4.67 KiB 1.67 KiB
dist/css/app.53019c4c.css 0.33 KiB 0.23 KiB
If installed, webpack-bundle-analyzer should launch (in the browser) showing an inflated: chunk-vendors..js, due to a hefty: aws-sdk.
aws-sdk will include api: .json files and lib: .js files for every AWS service I can think of!
The attempt to rectify:
Navigate to: https://sdk.amazonaws.com/builder/js/
Clear all services.
Select just: AWS.CognitoIdentity
Download "Minified" aws-sdk-.js
Download "Default" aws-sdk-.min.js
[Note: the following are the steps I am guessing I'm getting wrong?...]
In the project, search the node_modules directory for aws-sdk.js and aws-sdk.min.js.
They were found in /node_modules/aws-sdk/dist
Replace both files with the downloaded files (renaming to aws-sdk.js and aws-sdk.min.js respectively.)
Build the project. Run: npm run build
Project will build with same console warnings and same massive aws-sdk, as before, containing all the same .js and .json files for a bunch of services that are not actually imported in the application.
Final pieces of analysis:
Remove aws-sdk.js and aws-sdk.min.js from project's: /node_modules/aws-sdk/dist
Build the project. Run: npm run build
Project is built without even referencing these files.
Rename /node_modules/aws-sdk to /node_modules/TEMP_aws-sdk and attempt to build the project.
Build fails, and this proves (I think) that I was at least trying to add the custom versions, of aws-sdk.js and aws-sdk.min.js, somewhere in the correct directory!
Source Code:
vue.config.js:
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
src/components/HelloWorld.vue:
import { Auth } from "aws-amplify";
As said before, any help would be greatly appreciated! :-)
It looks like import { Auth } from "aws-amplify"; doesn't currently allow for tree shaking according to this issue.
Reading through several related issues, it appears that:
import Auth from '#aws-amplify/auth';
is the best you can currently do. I suspect that over time, the AWS team will figure out a way to better separate the internals.
For readers looking for a way to reduce bundle sizes for the aws-sdk package, see this section of the docs.
In my case:
import S3 from 'aws-sdk/clients/s3';
import AWS from 'aws-sdk/global';
cut the bundle size down by quite a lot. That gets it down to ~57k gz to use S3.
Also, for anyone using nuxt you can just run nuxt build -a to get the build analyzer.
I was trying to run webpack-4 first time
webpack ./src/js/app.js ./dist/app.bundle.js
it shows warning / error :
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
# multi ./src/js/app.js ./dist/app.bundle.js
Then i tried to change the mode
webpack --mode development
it shows :
ERROR in Entry module not found: Error: Can't resolve './src'
Resolved
Spent a lot of time to find out the solution.
Solution: Add index.js file into src folder.
That's it!.. solved :)
During Research, I found some facts about webpack 4 :
webpack 4 doesn’t need a configuration file by default!
webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default!
Met this problem when deploying on now.sh
Solution: Use Default Behavior
Move entry point to src/index.js.
This leverage webpack#4 default value for entry:
By default its value is ./src/index.js, but you can specify a
different (or multiple entry points) by configuring the entry property
in the webpack configuration.
Solution: Be Specific
As #Lokeh pointed out, if you don't want to change your JS file location you can always use path.resolve() in your webpack.config.js:
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
Adding a context explicitly in webpack.config.js fixed issue for me. Adapt the following piece of code in your project:
context: __dirname + '/src',
entry: './index.js',
webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development
This worked for me. I had the same trouble, it is because of a new version of webpack
webpack version 4.46.0
Perhaps someone gets stuck during migration from webpack 4 to 5.
in case of multiple webpack config files and if anyone uses merge:
Say webpack.common.js relies on some variables passed from cli eg:
module.export = (env) => {
const {myCustomVar} = env;
return {
// some common webpack config that uses myCustomVar
}
}
When you require common config in say webpack.prod.js:
const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');
const getProdConfig = () => {....}
module.exports = (env) => {
return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};
I had a similar error and was able to resolve it with the command webpack src/index.js -o dist/bundle.js the -o did the trick. The issue wasn't the location of index.js it was missing the operator for defining the output path location.
See https://webpack.js.org/api/cli/
Version of webpack was 4.44.1
Other solutions didn't work. I solved this by adding this to package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //this
},
Then npm run build and it works. At first i've tried with npx webpack. Would love to know why it works.
Just leaving this here, incase someone is not paying attention to the details like me, I had the same error, but because my webpack config file was named webpack.config instead on webpack.config.js, so my custom configurations were never picked and webpack was falling back to the defaults entry "src/index.js"
As of webpack ^4.29.6 you don't need any configuration file so instead of giving path in package.json we need to write simply "build": "webpack" and keep index.js as entry point in src folder. However if you want to change entry point you can do so in webpack config file
For Rails 6 application this steps worked for me:
1) bundle exec rails webpacker:install
system will reinstall webpacker but will rewrite few files:
modified: config/webpack/environment.js
modified: config/webpacker.yml
modified: package.json
modified: yarn.lock
2) Return configs to initial state:
git checkout config/webpack/environment.js
git checkout config/webpacker.yml
package.json and yarn.lock you can leave as they are
Spent a lot of time similarly to others to get around this annoying problem. Finally changed webpack.config.js as follows:-
output: {
path: path.resolve(__dirname, './src'), //src instead of dist
publicPath: '/src/', //src instead of dist
filename: 'main.js' //main.js instead of build.js
}
...as Edouard Lopez and Sabir Hussain mentioned that you don't need to mention an entry point, removed that also and the app compiled after a long frustration.
So my problem, which I would wager is a lot of people's problem is that I set the entry path based on my whole app root. So in my case, it was /client/main.ts. But because my webpack.config.js file was actually inside /client, I had to move into that folder to run webpack. Therefore my entry was now looking for /client/client/main.ts.
So if you get this error you need to really look at your entry path and make sure it is right based on where you are running webpack and where your webpack.config.js file is. Your entry path needs to be relative to where you are running webpack. Not relative to your app root.
I had this problem when changing between React/Rails gems. Running rails webpacker:install restored me to the Rails webpacker defaults, but also overwrote all of my config files. Upon closer inspection, the culprit turned out to be my webpack/development.js file, which in a previous gem version had gotten modified from this Rails webpacker default:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
Once I restored the file to those contents, this error went away. Specifically I had been missing the module.exports = environment.toWebpackConfig() line, which apparently is pretty important for those who want to avoid Rails webpacker thinking it needs a src/index.js file (it doesn't)
There is a javascript library, pre-built and available on npm, that I wish to develop with/debug. In my case, it is openlayers.
In the classic way of requiring a javascript file and wanting to debug, one would just switch the script url from the production version to the debug version, ie:
to
However, when using webpack and then importing via npm:
import openlayers from 'openlayers'
Gets you the production distribution of the library, the same as the ol.js script from above.
On a side note, to stop webpack trying to parse a prebuilt library and throw a warning about that you must include something like this:
// Squash OL whinging
webpackConfig.module.noParse = [
/\/dist\/ol.*\.js/, // openlayers is pre-built
]
Back to the problem at hand: how can I conditionally load a different entry-point for a module prebuilt and imported like this?
Of course, I can do it in a hacky way. By going into the node_modules/openlayers/package.json and switching the browser field from
"browser": "dist/ol.js",
to
"browser": "dist/ol-debug.js",
Is there a way I can request a different entry point via webpack or by using a different import syntax? Do I first have to petition the library maintainers to update the browser field to allow different entry point hints to browsers, according to the spec? https://github.com/defunctzombie/package-browser-field-spec
Thoughts on a more effective way to make this happen? Yearning to be able to programmatically switch loading of the production and debug versions of a library based on env variables.
Webpack has configuration options for replacing a module into a different path: https://webpack.github.io/docs/configuration.html#resolve-alias
This resolves the openlayers import to use the debug version:
webpackConfig.resolve.alias: {
openlayers: 'openlayers/dist/ol-debug.js'
}
In my build system I have a function that takes the environment type and returns the matching webpackConfig. Based on the parameter I include the above snippet or not.
Full code: webpack-multi-config.js
I have two different (gulp-) tasks for development and production. For example the production task: webpackProduction.js
Line 1 imports the config script with production as type.
My build system is based on gulp starter.